css 中 transition 需要注意的问题

cubic-bezier

是 transition-timing-function 的值的一种。

四个参数的关系式如下（t 代表时间，取值范围 [0, 1]）：
P0(1-t)3 + 3P1t(1-t)2 + 3P2t2(1-t)1 + P3t3

快捷工具：http://7xpdkf.com1.z0.glb.clouddn.com/bezier.html

steps

也是 transition-timing-function 的值的一种。

steps 其实可以有两个参数。
第一个参数表示把动画分割成几次；
第二个参数该参数可选，默认是 end，表示开始值保持一次，若参数为 start，表示开始不保持。

具体效果如下图：

另外，transition-timing-function 的值还有一种为关键字，
共 7 种：ease 先快后慢，linear 匀速，
ease-in 开始较慢，ease-out 结束较慢，ease-in-out 比 ease 幅度更大，
step-start 相当于 steps(1, start)，step-end 相当于 steps(1, end)

默认值

属性	默认值
transition-property	all
transition-duration	0s
transition-delay	0s
transition-timing-function	ease

注意：此处的 0 不能省掉 s，也算是特例了。
这也意味着，你只需要修改 transition-duration: 1s 其实就已经拥有 transition: all 1s 0 ease 了。

多值

传入多个值，逗号隔开。

property 多个时，其他默认为第一个

.box {
  transition-property: width, background, opacity;
  transition-duration: 2s, 500ms;
  transition-timing-function: linear, ease;
  transition-delay: 200ms, 0s;
}

/*类似于*/
.box:hover {
  transition: width 2s linear 200ms, background 500ms ease 0s, opacity 2s linear 200ms;
}

property 少于其他值的个数时，多余的无效

.box {
  transition-property: width;
  transition-duration: 2s,500ms;
  transition-timing-function: linear,ease;
  transition-delay: 200ms,0s;
}
/*类似于*/
.box:hover {
  transition: width 2s linear 200ms;
}

正向和反向

这是一个很棒的技巧，正向时为一个动画，反向时为另一个动画。
其实正向反向这个名词并不官方也不准确，如果你有更好的诠释方式可在下方评论，谢谢。

.box {
  width:100px; height:100px; background: pink;
  transition-duration: 3s;  /* 鼠标移出时动画 3s */
}
.box:hover {
  width: 300px;
  transition-duration: 500ms;  /* 鼠标悬停时动画 .5s */
}

auto 值问题

如果目标值为 auto 是不会有动画效果的。
这也是 CSS 为什么无法实现 slideDown 效果的一道坑。
据说低版本 webkit 在反向时有动画，但其实无所谓啦。

隐藏效果

比如，当动画时 font-size 变化后，拥有 em 的值所对应的结果其实也是变化的。

.box {
  width:100px; height:100px; background: pink;
  transition-duration: 2s;
  border-right: 1em solid;
}
.box:hover {
  font-size: 30px;    /* 鼠标悬停时边框宽度也变化了 */
}

transitionend

至今（20171009）都还有很多浏览器不支持 tranistionEnd 而要使用 webkitTransitionEnd，所以请做好兼容哟。

再者，如果多个 transition-property 有动画，是会触发多次 tranistionEnd 的。
当 duration-delay 为负值时，情况会很特殊，所以非常不推荐这些写。

.box {
  width:100px; height:100px; background: pink;
  transition-duration: 1s;
}
.box:hover {
  font-size: 30px;
  border-right: 2em solid;  /* 特别注意，如果修改的是 border 将触发 4 次哟 */
}

var transitionEnd = 'onwebkitanimationend' in window ? 'webkitTransitionEnd' : 'transitionEnd';
var $box = document.querySelector('.box');
$box.addEventListener(transitionEnd, function(e){
  console.log(e);  // 触发了两次
});

在 transitionEnd 的回调参数 event 中有些属性可能值得了解一下：

• propertyName 触发动画的属性名称
• elapsedTime 动画实际运行的时间
• pseudoElement 如果动画对象是伪类元素，将返回 "::before" 等