认识一下transition

transition

之前的CSS属性切换时，因为只有开始和截止两个状态，切换时略显生硬

jquery.animate

传说中的jquery在保证兼容性以后，又为开发者提供了简洁的过渡(动画其中之一效果)的语法，只须要简单使用如下代码便可实现一个复杂的过渡效果

$(selector).animate({
  cssProp: cssValue
})

在很长一段时间，这种实现动画的方式风靡一时

缺点

1. 须要选择到具体的DOM，这在如今广泛存在事件代理的时候，在触发状态元素复杂的关系，选择具体DOM是一件困难的事

2. animate内部时使用定时器，在性能上确定与原生没法比较

Transitions

在遇到触发动画难以定位元素时，我放弃了animate方法，尝试去往CSS方向寻找解决方案，transition此时出如今个人眼前

一个CSS属性固然先要看兼容性，不然就是耍流氓

IE 10+ 兼容已经比较好了

能够看一下对比代码,好比说hover状态元素变宽

$(e).on('hover' function () {
  $(e).animate({
    width: "300px"
  })
})

.e {
  width: 100px;
  transition: width 0.2s;
}
.e:hover {
  width: 200px;
}

对比

1.代码

jQuery实现的过渡，须要使用js操做DOM，并且存在DOM复杂时很差操做的状况

可读性: 二者都须要知道animate和transition，成本几乎一致，可是在代码可读性层面上，CSS完胜

可维护性： 将来须要扩展的话，改动CSS成本较小，至少能够减小测试，甚至不用测试

2.性能

JQuery代码使用了setInterval来实现动画，而transition是游览器内置实现，能够运行引擎持续优化，在目前，transition也是性能更好

总结

能够说animate方法实现过渡在transition面前不堪一击，学习transition只须要动动手指，了解一下参数便可。