在firefox上反应弹簧和成帧器运动滞后

Question

我对两个动画库（反应弹簧，成帧器运动）有疑问。当组件首次可见时，我正在尝试制作简单的动画。 （它是简化版本）

<motion.div initial={{x: -25, opacity: 0}} animate={{x: 0, opacity: 1}} transition={{duration: 2.5}} className="App-logo">NAME</motion.div>

Github project

在Chrome，Brave，Edge上看起来非常流畅，但是在Firefox上，动画结束时看起来比较滞后。 此示例基于成帧器运动，但在react-spring中看起来相同。当过渡持续时间较短，而translateX较长时，它看起来会更好，但动画效果仍然不是很平滑（更改在其他浏览器上运行的属性也不是解决此问题的方法）。 Firefox（76.0.1）（OS Win10）。

我尝试使用清晰的CSS做相同的动画，并且在每个浏览器上看起来都很流畅。我一直在寻找解决问题的方法，但没有发现任何具体问题。

Answer 1

我认为这与Firefox和Chrome的呈现引擎有所不同。 Firefox只是将div逐像素定位，而不渲染子像素。如果您对div稍加旋转，则会使FF引擎跳过优化。

<motion.div initial={{x: -25, opacity: 0, rotation: 0.02}} animate={{x: 0, opacity: 1, rotation: 0.02}} transition={{duration: 2.5}} className="App-logo">NAME</motion.div>

更新：根据您的git存储库，我添加一个示例。如果我为前两行添加旋转，则Firefox中的动画比最后一行明显更平滑。

https://codesandbox.io/s/happy-cannon-tew1f