javascript - 如何通过更改 css 类使用 requestAnimationFrame 进行动画制作？

Question

我有 4 个不同的类，比如说 .go1、.go2、.go3 和 .go4。
例如：

span
     transition: all .25s ease-in-out

span.go1
     transform: translate(44px, 39px);

span.go2
     transform: translate(60px, 71px);

我想通过更改类来为 span 元素设置动画，我可以使用 setInterval 来做到这一点，但我想知道它是否可以/应该通过使用 requestAnimationFrame 来完成，以及在这种情况下如何使用它。

Answer 1

可以/应该通过使用 requestAnimationFrame 来完成

不，requestAnimationFrame在这种情况下不是一个好的选择。

rAF 将尝试更新每个屏幕 vblank（当您像这样使用它时它会尝试更新下一个 vblank），这对于更改元素上的类来说太快了。看起来会很糟糕......转换需要 x 时间才能完成，并且在这种情况下调用 rAF 是没有意义的，因为它必须等到转换结束。

使用 css3 查看动画和键：
https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

并作为与此相关的注释事件（transitionend或webkitTransitionEnd用于 webkit），它允许您在触发事件时触发下一个转换。