如何启动框架运动？

Question

  I tried to make a modal window but I couldn't do it since framer doesn't work. I tried to use animate={{color: "red"}} and it worked but without animations, the text just became red;

Belowe，你可以看到将模型从顶部移动到几乎中心的代码。

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>


It should go from top to almost center or something but it just doesn't do anything. I installed framer using yarn.

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>