在用html5做动画的过程中,我们一般都会遇到一些奇怪的问题,然后我们使用了
setTimeout(function(){//code}, 0);
竟然好使了,哈哈
好用就行了,测试都通过,也不用去想为什么,但是上周做单位的项目,我整理了一套动画架构(比直接抄袭好一点,呵呵),都已经上线了,我无意中发现了一个ios上执行动画的bug,测试了一个下午,最后用
setTimeout(function(){//code}, 0);
解决了,这已经不是第一次遇到这个问题了,应该思考一下是为什么了,好,切入正题
javascript的执行分两个阶段,分先后执行
1 代码执行阶段
2 事件和队列阶段(
参考 John Resig的How JavaScript Timers Work
原文 http://ejohn.org/blog/how-javascript-timers-work/
原文加翻译 http://www.51094.com/?p=315
)
测试发现setTimeout应该是在第2阶段队列里执行的,代码说话
<script type="text/javascript">
setTimeout(function(){console.log('queue');}, 0);
console.log('a')
</script>
执行结果
a
queue
我猜测ios的动画是放在队列里执行的,我的代码
1,el1.style.webkitAnimation = "ant1 0.3s ease-out";
2,el2.style.webkitAnimation = "ant2 0.3s ease-out";
3,el2.style.display = "block";
el2.style.display = "block";
在 1,2句之前执行,
导致动画没有执行,el2就显示出来,bug出现了,这里有一个时间差,代码块执行到队列执行的时间,这个我们是可以感知的
使用
setTimeout(function(){
el2.style.display = "block";
}, 0);
相当于把
el2.style.display = "block";
也放在对队列中,1,2,3都在队列中执行,动画变得顺畅,ok