如何用AnimatePresence仅延迟单个元素的进入动画而非退出动画？

当然可以实现。你当前代码里的transition={{ delay: 1 }}会统一作用于进入、退出所有动画阶段，要实现仅延迟进入动画、退出无延迟的效果，有两种简洁的方式：

方法一：给单个动画属性指定过渡配置 #

直接在animate和exit属性内部单独定义过渡规则，这样各自的延迟只会作用于对应阶段：

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

export const MyComponent = ({ isVisible }) => (
  <AnimatePresence>
    {isVisible && (
      <motion.div
        key="loading" // 添加唯一key，避免AnimatePresence动画异常
        id="loading-element"
        initial={{ opacity: 0 }}
        animate={{ 
          opacity: 1,
          transition: { delay: 1 } // 仅给进入动画设置延迟
        }}
        exit={{ 
          opacity: 0,
          transition: { delay: 0 } // 退出动画立即执行
        }}
      />
    )}
    {isVisible && (
      <motion.div
        key="content" // 添加唯一key
        id="content"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      />
    )}
  </AnimatePresence>
)

方法二：在全局transition中针对阶段单独配置 #

通过transition的分阶段配置，给进入动画设置默认延迟，同时覆盖退出动画的延迟规则：

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

export const MyComponent = ({ isVisible }) => (
  <AnimatePresence>
    {isVisible && (
      <motion.div
        key="loading"
        id="loading-element"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{
          delay: 1, // 默认应用于进入动画
          exit: { delay: 0 } // 单独指定退出动画无延迟
        }}
      />
    )}
    {isVisible && (
      <motion.div
        key="content"
        id="content"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      />
    )}
  </AnimatePresence>
)

注意事项 #

• 务必给AnimatePresence包裹的每个动态元素添加唯一key，否则Framer Motion无法正确识别元素的进入/退出状态，可能导致动画失效。
• 两种方法都能实现你需要的「加载状态显示延迟1秒，退出立即执行」的效果，可根据代码风格选择。

内容的提问来源于stack exchange，提问作者sgarcia.dev