React Framer 运动有奇怪的视觉行为？

Question

使用 React Framer 运动 AnimatePresence 组件时，我遇到了意外的视觉行为。实际行为与我的预期不同。

预期行为：

实际行为： 使用 AnimatePresence 时，文本“React”突然消失。你可以看到实际的行为：

这是一个最小的可重现示例：

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

export default function App() {
  const [state, setState] = useState(true);
  const TRANSITION_VARIENTS = {
    initial: {
      opacity: 0,
      y: 10,
    },
    idle: {
      opacity: 1,
      y: 0,
    },
    end: {
      opacity: 0,
      y: 10,
    },
  };

  return (
    <div>
      <div>
        <input type="checkbox" onChange={() => setState(!state)} />
      </div>
      <div
        style={{
          width: "100vh",
          display: "flex",
        }}
      >
        <AnimatePresence mode="wait">
          {state && (
            <motion.span
              key="welcome-to"
              variants={TRANSITION_VARIENTS}
              initial="initial"
              animate="idle"
              exit="end"
              transition={{ type: "spring", bounce: 0, delay: 0.5 }}
            >
              Hello To{" "}
            </motion.span>
          )}
          <motion.span
            key="react"
            layoutId="react"
            variants={TRANSITION_VARIENTS}
            initial="initial"
            animate="idle"
            style={{
              color: "red",
            }}
            transition={{ type: "spring", bounce: 0 }}
          >
            React
          </motion.span>
          {!state && (
            <motion.span
              key="for-corporate"
              variants={TRANSITION_VARIENTS}
              initial="initial"
              animate="idle"
              exit="end"
              transition={{ type: "spring", bounce: 0, delay: 0.5 }}
            >
              {" "}
              for Corporate
            </motion.span>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}

环境：

反应版本：18.2.0

成帧器运动版本：11.5.4

为什么使用 AnimatePresence 时文本“React”突然消失而不是平滑消失？如何才能达到预期的平滑淡入淡出效果？

任何有关如何解决此问题的见解或建议将不胜感激。

Answer 1

您在使用 Framer Motion 的 AnimatePresence 组件时遇到的意外行为（其中文本“React”突然消失）可能归因于多种因素。以下是基于与 AnimatePresence 相关的常见问题的一些潜在解决方案和注意事项：

1. 确保正确使用密钥 AnimatePresence 的每个子项都应该有一个独特的 key prop。在你的情况下，“React”的motion.span应该有一个不同的键，以确保React可以正确跟踪它。如果密钥不唯一，可能会导致动画无法正确触发的问题。

2. 动画计时和退出道具 您已设置退出动画以将不透明度更改为 0 并向下移动元素。如果退出动画太突然或者过渡时机不合适，可能会出现文本突然消失的情况。您可以尝试调整过渡属性以查看是否可以改善行为。例如，您可能想要增加持续时间或调整缓动函数。

3. 检查模式 Prop 您在 AnimatePresence 中使用 mode="wait"。这应该确保退出组件在进入组件开始之前完成其动画。但是，如果快速发生多个状态更改，它仍然可能会导致意外的视觉行为。考虑状态变化是否太快，导致同步问题。

4. 初始和动画道具 确保所有运动组件的初始和动画道具设置正确。如果初始状态定义不正确，可能会导致意外的视觉行为。例如，确保初始状态设置为与退出状态相同的值以保持一致性。

5. React 严格模式 如果您的应用程序封装在 中，有时可能会导致 Framer Motion 中的动画出现问题。如果适用，请尝试删除以查看行为是否发生变化。

调整示例 这是代码的修改版本，进行了一些调整：

<motion.span
  key="react"
  layoutId="react"
  variants={TRANSITION_VARIENTS}
  initial="initial"
  animate="idle"
  exit="end"
  transition={{ type: "spring", bounce: 0, duration: 0.5 }} // Adjusted duration
  style={{
    color: "red",
  }}
>
  React
</motion.span>