首次使用React-Transition-Group：小图间切换时大图过渡效果失效问题

嘿，我帮你分析下这个问题：你现在的情况应该是只有当鼠标完全离开小图区域时，大图才会触发过渡，但在小图之间快速切换时，过渡没生效。核心原因是——如果你的大图只是单纯更新src属性，react-transition-group的过渡不会被触发，因为React认为这是同一个组件的props更新，而不是组件的挂载/卸载行为，而Transition/CSSTransition默认是监听组件的挂载和卸载来触发过渡的。

下面给你一套可行的解决方案：

1. 核心思路 #

• 使用CSSTransition（react-transition-group里更易用的CSS过渡组件）
• 给大图元素设置唯一的key（用当前选中的图片地址或标识），这样每次切换图片时，React会卸载旧的大图组件，挂载新的，从而触发过渡动画
• 编写对应的CSS过渡样式，控制淡入淡出效果

2. 完整代码示例 #

import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group';
// 假设你有三张图片的地址
const IMAGES = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg'
];

class ImageViewer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentImage: IMAGES[0], // 默认显示第一张图
      transitionTimeout: 300 // 过渡时长，和CSS对应
    };
  }

  handleImageHover = (imageSrc) => {
    this.setState({ currentImage: imageSrc });
  };

  render() {
    const { currentImage, transitionTimeout } = this.state;
    return (
      <div className="image-viewer">
        {/* 大图区域：用CSSTransition包裹，key绑定currentImage */}
        <CSSTransition
          in={true}
          key={currentImage}
          timeout={transitionTimeout}
          classNames="fade"
          unmountOnExit
        >
          <img 
            src={currentImage} 
            alt="Current view" 
            className="large-image"
          />
        </CSSTransition>

        {/* 小图区域 */}
        <div className="thumbnails">
          {IMAGES.map((imgSrc) => (
            <img
              key={imgSrc}
              src={imgSrc}
              alt="Thumbnail"
              className="thumbnail"
              onMouseEnter={() => this.handleImageHover(imgSrc)}
            />
          ))}
        </div>
      </div>
    );
  }
}

export default ImageViewer;

3. 对应的CSS样式 #

/* 淡入淡出过渡的样式 */
.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

/* 基础布局样式，可根据需求调整 */
.image-viewer {
  width: 600px;
  margin: 0 auto;
}

.large-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.thumbnail {
  width: 100px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}

.thumbnail:hover {
  border-color: #333;
}

关键细节解释 #

• key={currentImage}：这是触发过渡的核心！每次切换图片，currentImage变化，key也跟着变，React会把旧的<img>卸载，挂载新的，CSSTransition就会捕捉到挂载/卸载事件，触发淡入淡出。
• unmountOnExit：这个属性会在过渡结束后把旧的大图组件卸载，避免DOM里残留多个大图元素。
• timeout：必须和CSS里的过渡时长保持一致，不然react-transition-group会提前结束过渡状态。

这样调整后，不管是从小图A切到B，还是从B切回A，大图都会有平滑的淡入淡出过渡啦～

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