react-spring 和 framer-motion 在 firefox 上延迟
react-spring and framer-motion laggy on firefox
我有两个动画库（react-spring、framer-motion）有问题。我试图在组件第一次可见时制作简单的动画。 （这是简化版）
<motion.div initial={{x: -25, opacity: 0}} animate={{x: 0, opacity: 1}} transition={{duration: 2.5}} className="App-logo">NAME</motion.div>
它在 Chrome、Brave、Edge 上看起来非常流畅，但在 Firefox 上它在动画结束时看起来很滞后。
这个例子是基于 framer-motion 但在 react-spring 中看起来是一样的。当 transition-duration 更短而 translateX 更长时，它看起来更好，但它仍然不是流畅的动画（并且更改在其他浏览器上工作的属性不是这个问题的解决方案）。
Firefox(76.0.1)(OS Win10).
我尝试使用 clear css 制作相同的动画，它在每个浏览器上看起来都很流畅。我正在寻找解决我的问题的方法，但我没有找到任何特定的答案。
我认为这是 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
我有两个动画库（react-spring、framer-motion）有问题。我试图在组件第一次可见时制作简单的动画。 （这是简化版）
<motion.div initial={{x: -25, opacity: 0}} animate={{x: 0, opacity: 1}} transition={{duration: 2.5}} className="App-logo">NAME</motion.div>
它在 Chrome、Brave、Edge 上看起来非常流畅，但在 Firefox 上它在动画结束时看起来很滞后。 这个例子是基于 framer-motion 但在 react-spring 中看起来是一样的。当 transition-duration 更短而 translateX 更长时，它看起来更好，但它仍然不是流畅的动画（并且更改在其他浏览器上工作的属性不是这个问题的解决方案）。 Firefox(76.0.1)(OS Win10).
我尝试使用 clear css 制作相同的动画，它在每个浏览器上看起来都很流畅。我正在寻找解决我的问题的方法，但我没有找到任何特定的答案。
我认为这是 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