理解CSS过渡transition

示例效果

属性介绍

transition-property

transition-property定义应用过渡效果的CSS属性名称，默认值all，表示所有属性都获得过渡效果；属性值none表示没有属性获得过渡效果；property规定应用过渡效果的CSS属性。

过渡属性可以是多个值，多个属性之间用逗号间隔。

示例：transition-property: opacity, width;

并不是所有CSS属性都有过渡效果，只有具有中间值的属性才有效果，一般来说属性值可以为数值的均可获得过渡。

transition-duration

transition-duration定义完成过渡的时长，默认值0s，属性值为秒或毫秒

transition-timing-function

transition-timing-function定义过渡动画函数。默认值ease，表示慢速开始，然后变快，慢速结束；linear表示匀速运动；ease-in表示慢速开始（慢到快）；ease-out表示慢速结束（快到慢）；ease-in-out表示慢速开始和结束（慢到快到慢）；cubic-bezier(x1, y1, x2, y2)自定义贝塞尔运动曲线。

关于贝塞尔曲线可参考这篇文章：贝塞尔曲线扫盲

贝塞尔曲线：

过渡效果的贝塞尔曲线通过四个点来控制，绘制的是三次贝塞尔曲线，其中p0表示(0,0), p3表示(1,1)。transition-timing-function属性通过确定p1(x1, y1)和p2(x2,y2)的坐标值来确定曲线值，x1，y1，x2，y2都是0到1范围内的值(包括0和1)
在线获取贝塞尔曲线值

过渡原理：

Vstart = 属性起始值； Vend = 属性结束值； Vres = 中间值； p = 过渡动画函数输出值

Vres = (1 - p) * Vstart + p * Vend

Vres就是根据曲线动画计算出的不同时刻CSS属性值

steps步进函数：
transition-timing-function属性值除了可以为关键字和贝塞尔函数，还可以是steps步进函数，平时用到的情况很少，我能想到的就是进度条效果。steps步进函数将过渡事件划分为大小相等的时间间隔来运行，它有两个参数：

steps(<integer>[,start | end]?)

第一个参数指定间隔数，值为正整数；第二个参数可选，默认值end，可选值start。参数end可简单理解为第一帧是第一步开始，参数start表示第一帧是第一步结束。

示例中的例1和例2比较了这两种效果，当鼠标放到第一个元素上时，步进分三次到达终点，每次中间间隔时间一样，当鼠标放到第二元素上时，元素瞬间完成第一次步进，后两次间隔时间一样

transition-delay

过渡效果等待时间，默认值0s，属性值秒或毫秒

transition

transition定义元素的过渡效果，它是以下几个属性的简写：

 transition-property
 transition-duration
 transition-timing-function
 transition-delay

默认值all 0s ease 0s

多值

上面介绍了transition的基本属性，transition可以定义多个属性值一起参与过渡：

.test {
  transition: width 2s linear 100ms, opacity 2s ease 100ms;
}
// 等同于
.test {
  transition-property: width, opacity;
  transition-duration: 2s;
  transition-timing-function: linear, ease;
  transition-delay: 100ms;
}



.test1 {
  transition: width 2s linear 100ms, height 1s ease 0s, opacity 2s linear 100ms;
}
// 等同于
.test1 {
  transition-property: width, height, opacity;
  transition-duration: 2s, 1s;
  transition-timing-function: linear, ease;
  transition-delay: 100ms, 0s;
}

当transition-property的数量多于对应的transition-delay | transition-timing-function | transition-duration的属性值(属性值的个数大于1个)时，将按顺序开始取值

过渡阶段

过度分为前进（forward）和反向（reverse）两个阶段，若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬间值。

以hover为例，当元素在非hover状态时设置transition，则前进和方向过渡效果是一样的；当在元素hover状态时设置transition，则前进状态是hover时设置的为准，反向状态是非hover时设置的为准

例3和例4对比了两种效果：把鼠标放到例3中的盒子上在移开，前进和反向动画一样，把鼠标放到例4中的盒子上再移开，前进有过渡动画，反向就没有了。

例5演示了设置前进和反向不同时间的过渡动画

触发方式

过渡触发方式有三种：伪类触发、媒体查询和JavaScript触发。

伪类触发

例5演示了hover触发。
例6演示了focus触发，鼠标常按可查看过渡效果。
例7演示了active触发。

媒体查询

@media (max-width: 1000px){
  .test{
     width: 300px;
  }
}

JS触发

test.onclick = function(){
    test.style.width = '300px';
    setTimeout(function(){
        test.style.width = '100px';
    },2000);
}