认识一下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只需要动动手指，了解一下参数即可。