当我使用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。