javascript React Framer Motion仅在按下按钮时进行动画

72qzrwbm  于 11个月前  发布在  Java
关注(0)|答案(1)|浏览(196)

我有一个关闭菜单,当它被切换时,菜单淡入淡出。我试图删除的是关闭动画在初始页面加载时被激活。我不希望关闭动画在页面初始加载时播放。

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

字符串
是否有任何解决方案,使动画只激活时,按钮被切换?

3zwtqj6y

3zwtqj6y1#

根据文档
设置为false以使用animate中的值进行初始化(禁用挂载动画)。

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

字符串
因此,将initial={false}传递给motion.nav标记。

相关问题