React中更新state切换图片src时transition/animation不生效问题

先把代码里的基础bug修了，这些小问题也会影响功能：

• React事件名得用驼峰式，onclick改成onClick
• return后面直接换行会导致返回undefined，得用括号把JSX包起来
• <img>标签要闭合，写成<img ... />

修复后的基础代码：

const styles = {
  imageStyle: {
    opacity: 1,
    transition: "opacity 0.5s linear",
    height: "304px",
    width: "622px",
  },
};

const ImageBox = () => {
  const images = ["one.jpeg", "two.jpeg", "three.jpeg", "four.jpeg"];
  const [currentIndex, setCurrentIndex] = useState(0);

  return (
    <>
      <img style={styles.imageStyle} src={images[currentIndex]} />
      <button onClick={() => setCurrentIndex(prev => (prev + 1) % images.length)}>next image</button>
    </>
  );
};

为啥动画不生效？ #

你给图片固定了opacity:1，切换图片只是替换了src属性，没有触发CSS transition需要的属性值变化——transition只有当元素的某个CSS属性从一个值过渡到另一个值时才会生效，这里opacity一直是1，自然不会有动画效果。

几种可行的解决方案 #

方案1：用状态控制opacity触发过渡 #

切换图片时先把透明度改成0，等淡出动画跑完，再换图片并恢复透明度：

const ImageBox = () => {
  const images = ["one.jpeg", "two.jpeg", "three.jpeg", "four.jpeg"];
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isFading, setIsFading] = useState(false);

  const handleNext = () => {
    // 先触发淡出动画
    setIsFading(true);
    // 定时器时间要和transition时长一致
    setTimeout(() => {
      setCurrentIndex(prev => (prev + 1) % images.length);
      setIsFading(false);
    }, 500);
  };

  return (
    <>
      <img
        style={{
          ...styles.imageStyle,
          opacity: isFading ? 0 : 1,
        }}
        src={images[currentIndex]}
      />
      <button onClick={handleNext}>next image</button>
    </>
  );
};

方案2：两张图片叠加实现淡入淡出 #

这种方式不用等定时器，新图片淡入的同时旧图片淡出，视觉效果更流畅：

const ImageBox = () => {
  const images = ["one.jpeg", "two.jpeg", "three.jpeg", "four.jpeg"];
  const [currentIndex, setCurrentIndex] = useState(0);
  const [prevIndex, setPrevIndex] = useState(0);
  const [showPrevImg, setShowPrevImg] = useState(false);

  const handleNext = () => {
    setShowPrevImg(true);
    setPrevIndex(currentIndex);
    setTimeout(() => {
      setCurrentIndex(prev => (prev + 1) % images.length);
      setShowPrevImg(false);
    }, 500);
  };

  return (
    <div style={{ position: "relative", height: "304px", width: "622px" }}>
      {/* 旧图片，执行淡出 */}
      {showPrevImg && (
        <img
          style={{
            ...styles.imageStyle,
            position: "absolute",
            top: 0,
            left: 0,
            opacity: 0,
          }}
          src={images[prevIndex]}
        />
      )}
      {/* 当前图片，保持显示 */}
      <img
        style={{
          ...styles.imageStyle,
          position: showPrevImg ? "absolute" : "static",
          top: 0,
          left: 0,
        }}
        src={images[currentIndex]}
      />
      <button onClick={handleNext}>next image</button>
    </div>
  );
};

方案3：用key强制重渲染，结合animation入场 #

给<img>加key={currentIndex}，每次切换index，React会销毁旧img、创建新img，这时可以用CSS animation实现入场效果：

const styles = {
  imageStyle: {
    height: "304px",
    width: "622px",
    animation: "fadeIn 0.5s linear",
  },
};

// 记得在全局CSS里定义这个动画
/*
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
*/

const ImageBox = () => {
  const images = ["one.jpeg", "two.jpeg", "three.jpeg", "four.jpeg"];
  const [currentIndex, setCurrentIndex] = useState(0);

  return (
    <>
      <img
        style={styles.imageStyle}
        src={images[currentIndex]}
        key={currentIndex}
      />
      <button onClick={() => setCurrentIndex(prev => (prev + 1) % images.length)}>next image</button>
    </>
  );
};

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