仅在按下按钮时反应成帧器运动动画

Question

我有一个下拉菜单，当它被切换时，菜单淡入淡出。我要删除的是在加载初始页面时激活的关闭动画。我不想在最初加载页面时播放关闭的动画。

  const [menuOpen, setMenu] = useState(false);

  const location = useLocation();

  useEffect(() => {
    setMenu(false);
  }, [location]);

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

  return (
    <div>
      <button
        onClick={() => {
          setMenu((menuOpen) => !menuOpen);
        }}
      >
      </button>
      <div>
        <motion.nav animate={menuOpen ? "open" : "closed"} variants={variants}>
          <DropDownMenu />
        </motion.nav>
      </div>
    </div>
  );

是否有任何解决方案使动画仅在切换按钮时激活？

Answer 1

正在关注 docs

Set to false to initialise with the values in animate (disabling the mount animation).

// As false (disable mount animation)
<motion.div initial={false} animate={{ opacity: 0 }} />

所以将 initial={false} 传递给您的 motion.nav 标签。

仅在按下按钮时反应成帧器运动动画

react framer motion animate only when button is pressed

javascript

reactjs

framer-motion