如何启动帧运动?

Question

我试图使一个模态窗口，但我不能这样做，因为框架似乎不工作。我尝试使用animate={{color: "red"}}，它工作，但没有动画，文本只是变成红色。

下面，你可以看到代码只是将模态从顶部移动到几乎中心。

import {motion} from 'framer-motion'
const modal = {
hidden: {
y: "-100vh",
opacity: 0,
},
visible: {
y: "200px",
opacity: 1,
transition: {delay: 0.5}
}
}
<motion.div className="error-pop-up" variants={modal}>
{error}
</motion.div>

它应该从顶部移到几乎中间之类的地方，但它什么也没做。我用纱线安装了帧器。

Answer 1

在你的动作组件中，你必须指定分配给初始化和动画道具的变量。

<motion.div className="error-pop-up" variants={modal} initial="hidden" animate="visible">
{error}
</motion.div>

对于模态，我通常声明一个useState并将其与三元操作符组合在一起，像这样:

const [modalOpen, setModalOpen] = useState(false)

<motion.div className="error-pop-up" variants={modal} initial="hidden" animate={modalOpen ? "visible" : "hidden"}>
{error}
</motion.div>