1

我正在尝试使用 Framer Motion 创建一个非常简单的加载器动画，但遇到了一些奇怪的事情。

当我重新加载页面动画似乎已经完成，它不会像我在过渡道具中指定的那样重复。我的代码在这一点上非常简单，我不知道可能是什么问题，除了一个 - 我的应用程序是用 gatsby 构建的，它是服务器端渲染的。但是，文档说motion组件与 SSR 完全兼容。我也尝试过rotate: 0作为initial道具传递，但它也没有帮助。

这是我的组件：

<motion.div 
    className="loader"
    animate={{ 
        rotate: 360,
        transition: { repeat: Infinity, ease: 'linear', duration: .5 }
    }}
/>

.loader {
    height: 1.5rem;
    width: 1.5rem;
    border: transparent solid 3px;
    border-top: white solid 3px;
    border-radius: 50%;
}

编辑：我通过创建动画控件并在组件安装时运行它来使其工作：

const testControls = useAnimation();

useEffect(() => {
    testControls.start({
        rotate: 360,
        transition: { repeat: Infinity, ease: 'linear' }
    })
}, []);

return (
    <motion.div 
        className="loader"
        animate={testControls}
    />
)

但是，我仍然不明白为什么以前的方法不起作用，如果真的是 SSR 故障，我是否正确修复？

感谢您的任何建议！

4

0 回答 0