React：Key变更未按预期触发组件卸载，挂载动画失效问题

你遇到的动画失效问题，核心在于React在不同触发场景下的状态更新逻辑不同，导致浏览器无法捕捉到CSS过渡所需的样式变化过程：

1. 用户交互场景（点击按钮）为何正常？ #

当通过点击按钮触发setState时，React会对用户事件中的状态更新进行异步批量处理：

• 状态变更后，FadeInOnMount组件先卸载再重新挂载，初始渲染时opacity为0，此时浏览器会先渲染这个初始状态；
• 组件挂载完成后，useEffect触发并设置opacity为1，这是一次独立的异步更新，浏览器能清晰捕捉到从0到1的样式变化，因此过渡动画正常触发。

2. 定时器/异步回调场景为何失效？ #

在useEffect的定时器回调中调用setState，属于非用户触发的异步操作，React会以同步模式处理这次状态更新：

• 当state变化导致FadeInOnMount重新挂载时，组件初始的opacity:0和useEffect中立即设置的opacity:1会被React合并为一次渲染，浏览器直接渲染最终的opacity:1状态，完全看不到中间的0值，自然无法触发CSS过渡动画。

修复方案 #

方案1：给setOpacity添加微小延迟 #

通过setTimeout让setOpacity的执行时机晚于组件初始渲染，给浏览器留出渲染初始状态的时间：

const FadeInOnMount = ({ children }: { children: React.ReactNode }) => {
    const [opacity, setOpacity] = useState<number>(0)
    useEffect(() => {
        const timer = setTimeout(() => setOpacity(1), 0)
        return () => clearTimeout(timer)
    }, [])
    return <span style={{
        opacity,
        transition: "opacity 2s ease-in",
    }}
    >{children}</span>
}

方案2：React 18+ 使用startTransition #

利用React 18的并发特性，将setOpacity标记为过渡更新，让React优先完成组件初始渲染，再执行状态更新：

import { useState, useEffect, startTransition } from 'react'

const FadeInOnMount = ({ children }: { children: React.ReactNode }) => {
    const [opacity, setOpacity] = useState<number>(0)
    useEffect(() => {
        startTransition(() => {
            setOpacity(1)
        })
    }, [])
    return <span style={{
        opacity,
        transition: "opacity 2s ease-in",
    }}
    >{children}</span>
}

内容的提问来源于stack exchange，提问作者Lucas Mumbo