React setState轮播与CSS动画失步如何实现平滑切换

• JS的setInterval天生存在计时漂移：它的回调属于宏任务，必须等主线程空闲才能执行，页面渲染、其他脚本运行、标签页切到后台被节流都会造成延迟，运行时间越长累积的误差越大，根本追不上由浏览器渲染进程独立调度、精度极高的CSS动画。
• 现有逻辑会放大误差：当前useEffect依赖images状态，每次图片更新都会先清掉旧定时器、再创建新定时器，每次重启都会叠加新的时间差，失步速度会更快。
• 闭包内拷贝数组再修改的写法存在引用风险，也会干扰状态更新的预期时机。

核心思路是彻底放弃用JS定时器做时间基准，直接绑定CSS动画的原生迭代事件触发图片切换，从根源上消除两套独立计时系统的误差，永远和动画节奏对齐。

animationiteration是浏览器原生提供的事件，会在CSS动画每跑完一个完整循环的瞬间精确触发，刚好卡在你定义的动画100%进度（也就是opacity为0的时刻），这时候切换图片用户完全看不到断层，哪怕页面卡顿、浏览器对动画做了节流，切换时机也会严格和动画保持同步。

修正后的实现代码如下：

import React, { useState, useEffect, useRef } from 'react'
import styled, { keyframes } from 'styled-components'

const fadeIn = keyframes`
  5%, 95% { opacity: 1 }
  100% { opacity: 0 }
`
export const Gallery = styled.div<{ lapse: number }>`
  position: relative;
  margin: 0 auto;
  max-width: 1064px;
  opacity: 0;
  animation: ${fadeIn} ease-in-out ${({ lapse }) => `${lapse}s`} infinite;
`

const ImageCarousel = () => {
  const [images, setImages] = useState<string[]>([])
  const lapse = 5
  const galleryRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const galleryNode = galleryRef.current
    if (!galleryNode) return

    // 每轮动画结束瞬间触发图片轮换
    const handleImageSwap = () => {
      setImages(prevList => {
        if (prevList.length < 2) return prevList
        const [currentFirst, ...rest] = prevList
        return [...rest, currentFirst]
      })
    }

    galleryNode.addEventListener('animationiteration', handleImageSwap)
    return () => galleryNode.removeEventListener('animationiteration', handleImageSwap)
  }, [])

  // 可选：预加载所有图片，避免首次切换时的加载闪烁
  useEffect(() => {
    images.forEach(imgSrc => {
      const preloadImg = new Image()
      preloadImg.src = `imgs/${imgSrc}`
    })
  }, [images])

  return (
    <Gallery ref={galleryRef} lapse={lapse}>
      <Portal>
        <img src={`imgs/${images[0]}`} alt="主展示图" />
      </Portal>
      <Thumbnails>
        <Thumbwrapper> 
          <img src={`imgs/${images[1]}`} alt="缩略图1" />
        </Thumbwrapper>
        <Thumbwrapper> 
          <img src={`imgs/${images[2]}`} alt="缩略图2" />
        </Thumbwrapper>
      </Thumbnails>
    </Gallery>
  )
}

额外优化说明 #

• 状态更新改用函数式写法，不需要在闭包中缓存图片数组，也不用把images加入useEffect依赖，事件监听只需要在组件挂载时绑定一次，没有重复销毁重建的额外开销。
• 原代码中模板字符串的语法错误（反引号位置写反）已经同步修正。
• 如果需要兼容不支持animationiteration的老旧浏览器，可以降级用requestAnimationFrame轮询元素的animationCurrentTime属性判断动画进度，精度也远高于setInterval，现代浏览器全兼容原生事件，不需要额外处理。

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