如何啟動成幀器運動？

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;

下面你可以看到只是將模態從頂部移動到幾乎中心的代碼。

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>