标签：动画 DOM transition width 认识一下 animate CSS
transition
以前的CSS属性切换时，由于只有开始和截止两个状态，切换时略显生硬
jquery.animate
传说中的jquery在保证兼容性之后，又为开发者提供了简洁的过渡(动画其中之一效果)的语法，只需要简单使用以下代码即可实现一个复杂的过渡效果
$(selector).animate({
cssProp: cssValue
})在很长一段时间，这种实现动画的方式风靡一时
缺点
需要选择到具体的DOM，这在现在普遍存在事件代理的时候，在触发状态元素复杂的关系，选择具体DOM是一件困难的事
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只需要动动手指，了解一下参数即可。
标签：动画,DOM,transition,width,认识一下,animate,CSS 来源： https://www.cnblogs.com/sefaultment/p/11442760.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。