如何使用React Spring实现列表项每3秒逐个变色循环动画效果

问题根源 #

你当前的写法只把当前激活的单个列表项传入useTransition，所以框架只会渲染正在执行动画的那一项，其余项没有进入渲染流程自然处于隐藏状态。你的需求是所有项始终可见，不需要做列表项的挂载/卸载过渡，更适合用useSpring实现单属性的样式动画切换。

调整后可运行代码 #

import { useState, useEffect } from 'react';
import { useSpring, animated, config } from '@react-spring/web';

const ColorList = ({ items, intervalDelay = 3000 }) => {
  // 记录当前需要高亮动画的项索引
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setActiveIndex(prev => (prev + 1) % items.length);
    }, intervalDelay);
    return () => clearInterval(timer);
  }, [items.length, intervalDelay]);

  return (
    <ul style={{ padding: 0 }}>
      {/* 遍历渲染所有列表项，保证全部始终可见 */}
      {items.map((item, index) => {
        // 每个项独立绑定动画，根据是否为当前激活项切换颜色
        const springProps = useSpring({
          color: index === activeIndex ? '#FF0000' : '#000000',
          config: config.molasses,
        });
        return (
          <animated.li
            key={item}
            style={{
              ...springProps,
              display: 'inline-block',
              listStyleType: 'none',
              marginRight: '16px',
            }}
          >
            {item}
          </animated.li>
        );
      })}
    </ul>
  );
};

// 组件调用示例
<ColorList items={['Item 1', 'Item 2', 'Item 3', 'Item 4']} intervalDelay={3000} />

核心调整说明 #

• 移除了原来仅传递单个激活项给过渡的逻辑，改为遍历全量列表项渲染，保证所有项始终在页面上
• 替换useTransition为useSpring，仅处理已渲染组件的颜色属性切换，更贴合需求场景
• 补充了useEffect的依赖项，避免Hook闭包导致的定时器逻辑异常
• 每个列表项独立判断自身激活状态自动触发动画，符合从首项到末项循环执行的要求

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