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}
  }