React TransitionGroup状态变更时轮播图动画不播放问题咨询

问题根因 #

代码里存在4个核心问题导致过渡不生效：

• CSSTransition的timeout参数设置为200ms，但CSS中过渡时长为500ms，动画未执行完成元素就被卸载，过渡效果被截断
• useEffect未添加依赖数组，每次组件重渲染都会重复创建定时器，导致状态更新逻辑混乱
• 未给轮播容器和图片添加定位属性，两张切换中的图片处于流式布局上下排列，看不到重叠过渡的效果
• 如果你使用了CSS Modules（外层div用了styles.slideshow），直接写字符串类名slideshowImg会找不到编译后的CSS类，无法匹配过渡样式

修复步骤 #

1. 修复组件逻辑 #

调整timeout参数、useEffect依赖，以及补充必要的属性：

import { useState, useEffect } from 'react';
import { SwitchTransition, CSSTransition } from 'react-transition-group';
// 如果用CSS Modules记得导入样式
// import styles from './xxx.module.css';

const ImgSlideshow = (props) => {
  const images = [
    'https://images.unsplash.com/photo-1593642634315-48f5414c3ad9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
    'https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1189&q=80',
    'https://images.unsplash.com/photo-1593642532781-03e79bf5bec2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80',
    'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=925&q=80',
    'https://images.unsplash.com/photo-1593642634524-b40b5baae6bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1189&q=80'
  ]

  const [slide, setSlide] = useState(0);

  useEffect(() => {
    const slideshowTimer = setInterval(() => {
      setSlide(prev => (prev + 1) > images.length - 1 ? 0 : prev + 1);
    }, 3000)
    return () => clearInterval(slideshowTimer)
  }, [images.length])
  
  return (
    <div className="slideshow">
      <SwitchTransition mode="out-in">
        <CSSTransition key={slide} timeout={500} classNames='slideshowImg'>
          <img src={images[slide]} className="slideshowImg" alt="轮播图" />
        </CSSTransition>
      </SwitchTransition>
      {props.children}
    </div>
  )
}
export default ImgSlideshow;

2. 修复CSS样式 #

添加容器定位、图片定位，确保过渡时两张图片重叠：

.slideshow {
  position: relative;
  width: 100%;
  height: 400px; /* 按需调整轮播高度 */
  overflow: hidden;
}
.slideshowImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slideshowImg-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.slideshowImg-enter-active {
  opacity: 1;
  transform: translateX(0%);
}
.slideshowImg-exit {
  opacity: 1;
  transform: translateX(0%);
}
.slideshowImg-exit-active {
  opacity: 0;
  transform: translateX(100%);
}
.slideshowImg-enter-active,
.slideshowImg-exit-active {
  transition: opacity 500ms, transform 500ms;
}

3. CSS Modules适配（如果使用） #

如果你的样式文件是模块化的（后缀为.module.css），需要修改CSSTransition的classNames参数为对象形式：

<CSSTransition 
  key={slide} 
  timeout={500} 
  classNames={{
    enter: styles.slideshowImgEnter,
    enterActive: styles.slideshowImgEnterActive,
    exit: styles.slideshowImgExit,
    exitActive: styles.slideshowImgExitActive
  }}
>

同时修改CSS文件里的类名为驼峰格式，避免编译时符号丢失：

.slideshowImgEnter {
  opacity: 0;
  transform: translateX(-100%);
}
.slideshowImgEnterActive {
  opacity: 1;
  transform: translateX(0%);
}
.slideshowImgExit {
  opacity: 1;
  transform: translateX(0%);
}
.slideshowImgExitActive {
  opacity: 0;
  transform: translateX(100%);
}
.slideshowImgEnterActive,
.slideshowImgExitActive {
  transition: opacity 500ms, transform 500ms;
}

内容的提问来源于stack exchange，提问作者Jordan Baron