Open david2tdw opened 4 years ago
1、transition 需要去触发比如:点击事件、鼠标移入事件;而 animation 可以配合 @keyframe 可以不触发事件就触发这个动画。 2、transition 触发一次播放一次;而 animation 则是可以设置很多的属性,比如循环次数,动画结束的状态等等。 3、transition关注的是样式属性的变化,属性值和时间的关系是一个三次贝塞尔曲线;而animation作用于元素本身而不是样式属性,可以使用关键帧的概念,可以实现更自由的动画效果。 4、transition不会引起页面重绘,性能更好。 在性能方面:浏览器有一个主线程和排版线程;主线程一般是对 js 运行的、页面布局、生成位图等等,然后把生成好的位图传递给排版线程,而排版线程会通过 GPU 将位图绘制到页面上,也会向主线程请求位图等等;我们在用使用 aniamtion 的时候这样就可以改变很多属性,像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起,页面的回流和重绘,对性能影响就比较大,但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图,当然也就不会引起页面的重排了。
总结:
transition和animation的区别
1、transition 需要去触发比如:点击事件、鼠标移入事件;而 animation 可以配合 @keyframe 可以不触发事件就触发这个动画。 2、transition 触发一次播放一次;而 animation 则是可以设置很多的属性,比如循环次数,动画结束的状态等等。 3、transition关注的是样式属性的变化,属性值和时间的关系是一个三次贝塞尔曲线;而animation作用于元素本身而不是样式属性,可以使用关键帧的概念,可以实现更自由的动画效果。 4、transition不会引起页面重绘,性能更好。 在性能方面:浏览器有一个主线程和排版线程;主线程一般是对 js 运行的、页面布局、生成位图等等,然后把生成好的位图传递给排版线程,而排版线程会通过 GPU 将位图绘制到页面上,也会向主线程请求位图等等;我们在用使用 aniamtion 的时候这样就可以改变很多属性,像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起,页面的回流和重绘,对性能影响就比较大,但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图,当然也就不会引起页面的重排了。
总结:
transition和animation的区别