您如何通过单击成帧器运动为菜单设置动画？答案

【问题标题】：How do you animate menu with framer motion on-click?您如何通过单击成帧器运动为菜单设置动画？
【发布时间】：2021-04-19 14:12:05
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs css-animations framer-motion

【解决方案1】：

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

Framer Motion API Documentation

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>
  )
}

【讨论】：

【解决方案2】：

<MonkeyPic rotate={showFistBump} />

// ...

// Then switch animation variant depending on rotate prop

const variants = {
  rotate: { rotate: [0, -30, 0], transition: { duration: 0.5 } },
  // You can do whatever you want here, if you just want it to stop completely use `rotate: 0`
  stop: { y: [0, -10, 0], transition: { repeat: Infinity, repeatDelay: 3 } }
};

const MonkeyPic = ({ rotate }) => {
  return (
    <div>
      <motion.img
        variants={variants}
        animate={rotate ? 'rotate' : 'stop'}
        id="monkeyFace"
        src="/images/Monkey.png"
      />
    </div>
  );
};

【讨论】：