react-spring V9中useTransition如何正确反转动画播放顺序？

解决方案 #

react-spring V9的trail属性默认是按元素在输入数组中的索引从小到大叠加延迟，sort配置仅调整元素的渲染排列顺序，不会修改trail的延迟计算逻辑，所以无法只反转动画出场顺序。
你可以通过以下两种方案实现需求，不会改变原卡片的排列顺序：

方案1：自定义延迟替换trail配置 #

移除原有的trail配置，新增delay计算逻辑，按索引反向计算每个元素的入场延迟：

const bottomTransition = useTransition(
  bottomTeamState,
  {
    from: { transform: "translate3d(-700%, 0, 0)" },
    enter: { transform: "translate3d(0%, 0, 0)" },
    leave: { transform: "translate3d(700%, 0, 0)" },
    // 移除原有的trail: 175，用自定义delay实现反向延迟
    delay: (item, index) => {
      return (bottomTeamState.length - 1 - index) * 175
    },
    config: {clamp: true, mass: 3, tension: 150, friction: 38 },
});

方案2：渲染时反转过渡实例 #

如果不想修改过渡配置，也可以在调用返回的过渡函数时，先将生成的渲染元素数组反转：

// 渲染时先转数组再反转，仅调整动画触发顺序
const transitionElements = Array.from(bottomTransition((style, item) => {
  return <div style={style}>{item.content}</div>
})).reverse()

// 后续直接渲染transitionElements即可

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