如何使用单击时的帧器运动来设置菜单的动画

Question

(明显使用React+Gatsby(我有一个汉堡按钮，可以打开我网站上的导航菜单。我想知道如何使用Framer Motion通过动画打开菜单。

Answer 1

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

成帧器运动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>
)
}