React Spring useTransition实现stagger效果异常（仅首次挂载正常）求助

你遇到的问题核心是过渡动画的触发条件、key配置或stagger设置不正确，导致只有首次挂载时动画正常，后续状态变化时无法触发预期的交错效果。以下是具体修复方案：

关键问题分析 #

1. key 配置错误：如果使用数组索引作为key，当数组增删项时，React会错误复用组件，导致过渡动画无法正确绑定到对应的元素上。
2. stagger 未正确配置：如果stagger的延迟逻辑只在首次初始化时生效，后续状态变化时没有重新计算，就会失去交错效果。
3. 过渡触发依赖未关联：useTransition需要监听正确的状态变化，确保状态更新时重新生成过渡动画配置。

修复代码示例 #

import { useState } from 'react';
import { useTransition, animated } from 'react-spring';

function App() {
  const [items, setItems] = useState(['项目1', '项目2', '项目3']);

  // 配置useTransition，确保每个项的key唯一稳定，同时设置交错动画
  const transitions = useTransition(items, {
    key: item => item, // 用项本身作为唯一key（如果是对象，用item.id这类唯一标识）
    from: { opacity: 0, transform: 'translateY(30px)' },
    enter: { opacity: 1, transform: 'translateY(0)' },
    leave: { opacity: 0, transform: 'translateY(-30px)' },
    stagger: 120, // 每个项的动画延迟间隔120ms，实现交错效果
    // 也可以用函数动态调整延迟：stagger: (index) => index * 120
  });

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={() => setItems(prev => [...prev, `项目${prev.length + 1}`])} style={{ marginRight: '10px' }}>
        添加项目
      </button>
      <button onClick={() => setItems(prev => prev.slice(0, -1))}>
        删除最后一项
      </button>
      <div style={{ marginTop: '20px' }}>
        {transitions((style, item) => (
          <animated.div 
            style={{ ...style, padding: '10px', margin: '5px 0', backgroundColor: '#f0f0f0', borderRadius: '4px' }}
          >
            {item}
          </animated.div>
        ))}
      </div>
    </div>
  );
}

export default App;

核心修复点 #

• 唯一稳定的key：必须使用每个项的唯一标识作为key（比如对象的id、字符串内容），绝对不能用数组索引，避免React组件复用错误。
• stagger 直接配置：在useTransition的配置对象中设置stagger属性，无论是固定值还是动态函数，都会在每次状态变化时重新计算延迟，确保交错效果始终生效。
• 状态正确关联：确保items状态的更新会触发useTransition重新计算过渡，比如用扩展运算符创建新数组，而不是直接修改原数组。

如果是更新现有项的内容需要触发动画，可以添加update配置项，定义内容变化时的动画效果：

const transitions = useTransition(items, {
  // ...其他配置
  update: { opacity: 1, transform: 'scale(1.05)' },
});

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