javascript - 当我使用 css3 过渡时，如何在每一帧获得确切的过渡属性？

Question

我知道转换结束时会触发一个 transitionEnd 事件。

但是当我想在过渡期间做某事时，我发现没有这样的“onTransition”事件处理程序。

那么有什么办法可以得到每一帧的过渡细节呢？

var el = document.getElementById('test');
el.style.webkitTransitionDuration = '.4s';
el.style.webkitTransitionProperty = 'left';
el.style.left = '500px';

我想在每个过渡帧中获得完全左属性，就像这样（假代码）：

el.onTransition = function(e) {
    console.log(e.currentLeftValue);
}

Answer 1

每一帧都没有事件，但您可以使用它requestAnimationFrame来获得希望以相似速率调用的东西。至于动画的当前属性，可以使用getComputedStyle.