为什么我的组件在使用framer-motion的AnimatePresence时消失了？

Question

在使用成帧器运动时，我遇到了一些我不明白的奇怪错误。我有以下代码，当我单击按钮时，

h1

会按预期执行相应的动画。但是，如果我在动画完成之前单击按钮，该组件就会完全消失。

import { useState } from "react";

import { AnimatePresence, motion } from "framer-motion";

export default function App() {
  const [boolean, setBoolean] = useState<boolean>(true);
  if (boolean) return <Component text="A" onClick={() => setBoolean(false)} />;
  else return <Component text="B" onClick={() => setBoolean(true)} />;
}

function Component({ text, onClick }: { text: string; onClick: () => void }) {
  return (
    <>
      <AnimatePresence mode="wait">
        <motion.h1
          key={text}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          Title {text}
        </motion.h1>
      </AnimatePresence>
      <button onClick={onClick}>Button {text}</button>
    </>
  );
}

我希望该组件不会消失。我不知道为什么会发生这种情况，这是一种奇怪的行为。

Answer 1

我认为通过将

exitBeforeEnter

属性设置为

false

并调整

exit

动画就可以了。这是更新后的代码：

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

export default function App() {
  const [boolean, setBoolean] = useState<boolean>(true);
  if (boolean) return <Component text="A" onClick={() => setBoolean(false)} />;
  else return <Component text="B" onClick={() => setBoolean(true)} />;
}

function Component({ text, onClick }: { text: string; onClick: () => void }) {
  return (
    <>
      <AnimatePresence exitBeforeEnter={false}>
        <motion.h1
          key={text}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }} // Adjusted exit animation
        >
          Title {text}
        </motion.h1>
      </AnimatePresence>
      <button onClick={onClick}>Button {text}</button>
    </>
  );
}