framer-motion中AnimatePresence组件表现异常问题咨询

快速点击按钮时，前一个元素的退出动画还未结束，新元素就已开始入场，导致两者同时显示。只需给AnimatePresence添加mode="wait"属性，让它等待前一个元素完全退出后再渲染新元素即可。

修改后的代码如下：

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

export default function App() {
  const [a, setA] = useState(true);
  return (
    <div className="max-w-sm mx-auto">
      <button onClick={() => setA((a) => !a)}>Button</button>
      {/* 添加mode="wait"属性 */}
      <AnimatePresence mode="wait">
        {a ? (
          <motion.div
            key="a"
            initial={{ x: -100, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            exit={{ x: -100, opacity: 0 }}
            transition={{ duration: 2 }}
          >
            A
          </motion.div>
        ) : (
          <motion.div
            key="b"
            initial={{ x: 100, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            exit={{ x: 100, opacity: 0 }}
            transition={{ duration: 2 }}
          >
            B
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

修改后，每次切换都会等待当前元素的退出动画完全结束，才会启动新元素的入场动画，不会再出现两个元素同时显示的情况。

内容的提问来源于stack exchange，提问作者Martí Serra Molina