Transition概念

Transition 可以设置 CSS 属性的过渡效果，它有以下几个属性。

transition-property 用于指定应用过渡属性的名称
transition-duration 用于指定这个过渡的持续时间
transition-delay 用于指定延迟过渡的时间
transition-timing-function 用于指定过渡的类型

transition-property

指定应用过度属性的名称，默认值为all，表示所有可被动画的属性都表现出过度动画
property：指定多个；
none：没有过度动画；
all：所有可被动画的属性都表现出过度动画；
IDENT：属性名称（可以指定多个）
注意：当只设置了 transition-property 属性而没有设置过渡持续时间的时候，过渡效果不会生效。

transition-duration

用于设置过渡的持续时间，属性值以秒s或毫秒ms为单位，默认值为0。
可以指定多个时长，多个每个时长会被应用到由 transition-property 指定的对应属性上。
例如：想让容器的宽度有一个10秒的过渡，高度有一个5秒的过渡，代码如下:

<style>.box {width: 200px;height: 200px;background-color: dodgerblue;transition-property: width, height;transition-duration: 10s, 5s;  /*设置与 transition-property 对应的过渡时间*/}.box:hover { /*在鼠标移入的时候修改宽高*/width: 400px;height: 400px;}
</style>
</head><body><div class="box"></div>
</body>

transition-delay

规定了在过渡效果开始作用之前需要等待的时间（延迟时间），值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在什么时候开始。取值为正时会延迟响应过渡效果；取值为负时会使过渡立即开始。
可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性transition-property。

transition-timing-function

css属性受到transition的影响，会产生不断变化的中间值，而css transition-timing-function属性用来描述这个中间是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。

linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速，效果比 ease 感觉强烈一些
cubic-bezier 贝塞尔曲线

过渡的坑

transition在元素首次渲染还没有结束的情况下是不会被触发的

示例代码：<style>* {margin: 0;padding: 0;}html {height: 100%;}body {width: 60%;height: 60%;border: 1px solid;margin: 100px auto 0;}#test {width: 100px;height: 100px;border-radius: 50%;background: pink;text-align: center;font: 50px/200px "微软雅黑";position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;transition-property: width;transition-duration: 2s;transition-timing-function: linear;}</style><body><div id="test"></div></body><script type="text/javascript">alert(1);//transition在元素首次渲染还没有结束的情况下是不会被触发的/*  var test = document.querySelector("#test");test.style.width = "300px"; *//*   window.onload = function() {var test = document.querySelector("#test");test.style.width = "300px";} */setTimeout(function() {var test = document.querySelector("#test");test.style.width = "300px";}, 3000);
</script>

*指定的过度的属性的名称要一致
*简写属性顺序不能错

Vue中的transition组件

在vue中我们可以直接用transition包裹所需要进行动画的标签

<transition-group tag="ul" name="slide"><li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

然后在css中设置如下的内容即可：
name- 字符串，用于自动生成过渡 CSS 类名。例如，name: 'fade’会自动扩大到.fade-enter，.fade-enter-active等默认为"v"。
appear- 布尔值，是否在初始渲染时应用过渡。默认为false.
css- boolean, 是否应用 CSS 过渡类。默认为true. 如果设置为false，则只会触发通过组件事件注册的 JavaScript 钩子。
type- 字符串，指定要等待以确定转换结束时间的转换事件的类型。可用值为"transition"和"animation"。默认情况下，它会自动检测持续时间较长的类型。
mode- 字符串，控制离开/进入转换的时序。可用模式是"out-in"和"in-out"; 默认为同时。
duration- 号码 | { enter:number, leave:number }, 指定过渡的持续时间。默认情况下，Vue 等待根过渡元素上的第一个transitionend或animationend事件。
enter-class - 细绳
leave-class - 细绳
appear-class - 细绳
enter-to-class - 细绳
leave-to-class - 细绳
appear-to-class - 细绳
enter-active-class - 细绳
leave-active-class - 细绳
appear-active-class - 细绳

总结

<style>.box {width: 200px;height: 200px;background-color: dodgerblue;/* transition 简写属性 */transition: 1s width, 2s height;}.box:hover {width: 400px;height: 400px;}
</style><body><div class="box"></div>
</body>

特别注意：
在transition中，值是有书写顺序的：第一个为时间的值会被赋值给transition-duration，第二个为时间的值会被赋值给transition-delay
推荐抒写顺序
过渡时间-过渡样式-过渡形式-延迟时间

transition属性相关推荐

css3中transition属性详解
transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显.渐弱.动画快慢等.transition和transform是两种不同的动画模型. ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
css 右上角翻开动画_css简单动画（transition属性）
一.对transition属性的认识 1.transition 属性是一个简写属性,可用于设置四个过渡属性: transition-property 过渡效果的 CSS 属性的名称(heigh ...
html的扇形代码导航,CSS3--利用transform和transition属性制作扇形导航
在前面,我们已经讲解了transform这个属性以及案例,那么本文会进一步结合transform和transition两个属性,并制作一个简单的案例进行说明. 一.transition属性说明接下来 ...
利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
css transtion不生效_CSS中transition属性不起作用的原因及解决方法
CSS中的transition属性可用于调整元素更改的时间,它可以像动画一样显示.虽然transition属性可以很方便的实现过渡效果,但是有时候可能会出现无效的情况,所以我们就需要来理解transi ...
transition属性详细讲解
transition属性的格式: transition:transition-property,transition-duration,transition-timing-function,trans ...
transition属性定义动画
CSS3新增属性:transition属性,可以定义简单动画! 下面给大家演示一个demo,抛砖引玉. 而且不需要使用 js! CSS代码如下 <style>.rbar.mobile{po ...
css3 transition属性造成文字抖动
解决方法: transition属性后面接着写 transform:translateZ(0)
css transtion不生效_CSS3 Transition属性使用详解
transition 属性是一个简写属性,用于设置四个过渡属性:transition-property transition-duration transition-timing-function t ...

transition属性

transition