items 在 transition-out of usetransitions 期间洗牌

Question

我正在尝试使用 react-spring useTransition 挂钩在项目数组和同一数组的扩展版本之间切换。展开时过渡看起来不错，但在过渡回来时，项目会被打乱。具体来说，旧列表中的最后一项在转换出时移动到第一个位置。我怎样才能防止这种情况发生？我尝试了“reset”和“unique”选项的所有组合，修改原始数组而不是在两个数组之间切换，但似乎没有帮助。

我在发现了类似的问题，但原始沙箱和“解决方案”沙箱都已损坏。另外，仅迁移到较新版本对我来说不是解决方案。

这是一个可以说明问题的最小工作示例：https://codesandbox.io/s/recursing-aryabhata-8u2ri

Answer 1

你的问题非常令人沮丧，因为它应该可以工作，而且它是一个如此简单的例子。我现在想不出一个简单的解决办法。一定和按键有关。

但它适用于较新的版本。例如，如果您更改为 9.0.0-beta.1。

您也可以试试最新的9.0.0-rc.3版本。我期待着新的 9 版本。转换完全重构。

您可以在此处了解更改： https://aleclarson.github.io/react-spring/v9/#The-useTransition-rework

您的示例在 9.0.0-rc.3 中看起来像这样：

const itemsA = ["a", "b", "c"];
const itemsB = ["d", "e", "f"];

export default function App() {
  const [expanded, setExpanded] = useState(false);
  const items = expanded ? [...itemsA, ...itemsB] : [...itemsA];
  const transition = useTransition(items, {
    from: { opacity: 0, transform: "translate3d(100%,0,0)" },
    enter: { opacity: 1, transform: "translate3d(0%,0,0)" },
    leave: { opacity: 0, transform: "translate3d(50%,0,0)" },
    keys: p => p
  });

  return (
    <div className="simple-trans-main" onClick={() => setExpanded(!expanded)}>
      {transition((style, item, t, i) => (
        <animated.div style={style}>
          <h1>{item}</h1>
        </animated.div>
      ))}
    </div>
  );
}

https://codesandbox.io/s/basic-transition-with-v9-react-spring-ojp4w

items 在 transition-out of usetransitions 期间洗牌

items shuffled during transition-out of usetransitions

reactjs

react-hooks

transition

react-spring