firefox 上的 react-spring 和 framer-motion 滞后

Question

我对两个 animation 库（react-spring，framer-motion）有疑问。 我试图在组件第一次可见时制作简单的 animation 。 （这是简化版）

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

Github项目

它在 Chrome、Brave、Edge 上看起来非常流畅，但在 Firefox 上它在 animation 的末尾看起来很滞后。 此示例基于 framer-motion，但在 react-spring 中看起来相同。 当 transition-duration 更短而 translateX 更长时，它看起来更好，但仍然不是平滑的动画（并且更改适用于其他浏览器的属性不是此问题的解决方案）。 火狐（76.0.1）（操作系统 Win10）。

我尝试使用清晰的 css 执行相同的 animation 并且在每个浏览器上看起来都很流畅。 我正在寻找解决问题的方法，但没有找到任何特定的答案。

Answer 1

我认为这是 Firefox 和 Chrome 的渲染引擎的区别。 Firefox 只是 position 逐像素的 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 存储库，我添加了一个示例。 如果我为前两行添加旋转，animation 在 Firefox 中明显比最后一行更平滑。

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

Answer 2

我在 chrome 上得到了滞后的动画，并尝试了一些比以前更好的表现。 动画非常流畅。 您可以在 Firefox 上尝试相同的方法，并让我知道它是否有效

在 Framer 运动中，不要直接在 JSX 中声明动画，而是使用变体。

改变这个

 <motion.div
    animate={{scale:1,opacity:1}}
    exit={{x:200,scale:2,opacity:0}}
    transition={{type:"spring",duration:1}}
    >

      <Outlet />
    </motion.div>

对此

 <motion.div
    variants={variants}
    initial="initial"
    animate="animate"
    exit="exit"
    transition="transition"
    >

      <Outlet />
    </motion.div>

变体 object

 const variants = {
    initial  : {scale:0,opacity:0},
    animate : {scale:1,opacity:1},
    exit : {x:200,scale:0,opacity:0},
    transition : {type:"spring",duration:1.5}
  }