gpt4 book ai didi

css - react-spring 和 framer-motion 在 firefox 上延迟

转载 作者:行者123 更新时间:2023-12-04 17:27:59 28 4
gpt4 key购买 nike

我对两个动画库(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>

Github project

它在 Chrome、Brave、Edge 上看起来非常流畅,但在 Firefox 上它在动画结束时看起来很滞后。这个例子基于 framer-motion 但在 react-spring 中它看起来是一样的。当 transition-duration 更短而 translateX 更长时,它看起来更好,但它仍然不是流畅的动画(并且更改在其他浏览器上工作的属性不是这个问题的解决方案)。Firefox(76.0.1)(操作系统 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

enter image description here

关于css - react-spring 和 framer-motion 在 firefox 上延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62143105/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com