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

Designer°伊糖提问于 2026-01-26 20:45:22 阅读 51

组件

我在用CSSTransition做Fade组件时遇到个怪问题，切换显示状态时只有第二次才会触发淡入动画，第一次直接显示出来。代码检查了好几遍没发现问题：


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

function FadeComponent({ show }) {
  return (
    
      淡入文字
    
  );
}

CSS写的是.fade-enter和.fade-exit的透明度变化，已经确认类名匹配。尝试过把initialState设成’false’也没用，控制台也没报错，就是第一次切换时完全没有过渡效果，直接出现元素。

我来解答赞 10 收藏

反馈

1 条解答

Des.炳硕 Lv1

这个问题挺常见的，第一次渲染没动画是因为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属性有没有定义好。

2026-01-29 20:14