javascript - javascript和css时序是否同步？

Question

javascript(timeout，interval)和css(animations，delay)时序是否同步？

例如:

#anim1 {
animation: anim1 10s linear;
display: none;
}

anim1.style.display = "block" ;
setTimeout(function() {
 anim2.style.webkitAnimation= 'anim2 10s linear';
}, 10000);

anim2 是否会在 anim1 结束时准确地触发？是否因浏览器而异？在这种情况下，我对 webkit 焦点更感兴趣。

请注意，anim1 是通过 javascript 触发的，以避免加载时间不一致。

NB : 这是一个理论问题，上面的代码只是一个例子，你不能在家里使用它，因为有更合适的方法可以这样做。

Answer 1

据我所知，没有任何保证。但是，有些事件您可以监听；

anim1.addEventListener('animationend',function(){
    anim2.style.webkitAnimation= 'anim2 10s linear';
}

请注意，由于这些是新的，因此您仍然需要考虑 vendor 前缀； webkitAnimationEnd 和 oanimationend 用于 Webkit 和 Opera。

另外，正如我最初的回答(错误地)建议的那样，如果您想使用 CSS 过渡而不是动画，则可以使用 transitionend(具有类似的前缀)。