Question

如何使用js捕获css3动画

Answer 1

举个例子 代码如下:
<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