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,表示开始不保持。

具体效果如下图:
740839-20160402202548613-995784186

另外,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" 等

posted on 2017-10-09 14:02  永恒的浪荡时光  阅读(2323)  评论(0编辑  收藏  举报

导航