如何通过单击时的成帧器运动来制作菜单动画？

Question

（显然使用 React + Gatsby）我有一个汉堡包按钮，可以在我的网站中打开导航菜单。我想知道如何使用 Framer Motion 打开带有动画的菜单。

Answer 1

您可以使用成帧器运动文档的示例部分中给出的此方法。

Framer 运动 API 文档

import { motion } from "framer-motion"

const variants = {
  open: { opacity: 1, x: 0 },
  closed: { opacity: 0, x: "-100%" },
}

export const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <motion.nav
      animate={isOpen ? "open" : "closed"}
      variants={variants}
    >
      'Menu Content'
    </motion.nav>
  )
}