使用 Framer Motion React 在退出时为组件设置动画答案

【问题标题】：Animate Components On Exit With Framer Motion React使用 Framer Motion React 在退出时为组件设置动画
【发布时间】：2021-01-04 20:25:40
【问题描述】：

我有一个在两个组件之间切换的按钮。如何在退出时为每个组件添加动画？这是我的代码不起作用：

export default function App() {
  const [dark, setDark] = useState(false);
  const toggle = () => {
    setDark(!dark);
  };

  return (
    <div>
      <AnimatePresence>
        {dark ? (
          <motion.h2 exit={{ opacity: 0 }}>Dark</motion.h2>
        ) : (
          <motion.h2 exit={{ opacity: 0 }}>Light</motion.h2>
        )}
      </AnimatePresence>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

感谢您的帮助！

【问题讨论】：

标签： javascript reactjs framer-motion

【解决方案1】：

现在已修复。为了让动画生效，您应该添加 initial 和 animate 道具。此外，每个组件都需要有一个唯一的 key。

【讨论】：