如何使用js捕获css3动画

答案:1 悬赏:40 手机版

解决时间 2021-03-18 00:50

提问者网友：我一贱你就笑
2021-03-17 15:09

如何使用js捕获css3动画

最佳答案

五星知识达人网友：忘川信使
2021-03-17 15:27

举个例子代码如下:
<div id="test" style="transition:all 1s ease; width:100px;" ></div>
js:

代码如下:
$("#test").width(200);

　　这样1秒之后这个div的宽度会变成200px。不是孙悟空变桃子一样瞬间变大，慢慢的赶脚，不卡不顿。而且使用css动画有个好处，它不受耗时js的影响。虽然浏览器中UI线程与js线程是互斥，但这一点对css动画不成立，并且很多浏览器还能启用硬件加速（比如：Chrome）。虽然浏览器重布局普通情况下感觉不是很明显，但还是应该尽量避免大面积的重布局。so在动画元素上加上-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);这样浏览器会独立渲染这一层。即便是重布局无法避免，这样面积也小些。而使用translate取代margin也确实是一个十分明智的决定。
　　最后附上一些常用的改变时会触发重布局的属代码如下:

　　 width
　　height
　　padding
　　margin
　　display
　　border-width
　　border
　　min-height

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息