您如何使用单击时的成帧器动画动画菜单？

Question

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

Answer 1

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

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

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

您如何使用单击时的成帧器动画动画菜单？

How do you animate menu with framer motion on-click?

javascript

css-animations

reactjs

framer-motion