React Fade组件为什么首次渲染时没有动画效果？

这个问题很典型，CSSTransition 首次渲染和后续切换用的是不同的类名。

你写的 .fade-enter 是给后续切换用的，但首次渲染时如果 show 一开始就是 true，CSSTransition 用的是 appear 相关的类名，不是 enter。

解决方案很简单，补上 appear 的样式就行：

.fade-appear {

  opacity: 0;

}



.fade-appear-active {

  opacity: 1;

  transition: opacity 300ms;

}

或者如果你想统一用 enter 的方式，可以在组件上加 appear={false} 禁用首次动画，或者加 mountOnEnter 让它第一次以隐藏状态挂载，这样切过来的时候就会触发 enter 动画。

最省心的办法就是补样式，CSSTransition 的类名优先级是：首次渲染用 appear，后续切换用 enter。

这个问题挺常见的，第一次渲染没动画是因为React在初始渲染时不会触发CSSTransition的进入动画。简单说，React认为这是组件第一次挂载，而不是“进入”状态，所以动画不会生效。

可以试试这样改你的代码：

import { CSSTransition } from 'react-transition-group';



function FadeComponent({ show }) {

  // 增加一个state来控制显示

  const [isMounted, setIsMounted] = React.useState(false);



  React.useEffect(() => {

    setIsMounted(true);

  }, []);



  return (

    
      in={show && isMounted} // 注意这里加上isMounted

      timeout={300}

      classNames="fade"

    >

      
淡入文字


    

  );

}

关键点就是加了一个isMounted的状态，在组件真正挂载后再允许动画触发。这样第一次切换时也会有动画效果了。

另外再确认下CSS部分，确保.fade-enter和.fade-enter-active这些类名都写对了，特别是transition属性有没有定义好。