items shuffled during transition-out of usetransitions

Question

I'm trying to use the react-spring useTransition hook to toggle between an array of items and an extended version of the same array. The transition looks fine when expanding, but when transitioning back, the items get shuffled. Specifically, the last item in the old list moves to the first position while transitioning out. How can I prevent this from happening? I tried all combinations of the "reset" and "unique" options, modifying the original array instead of switching between two arrays, but nothing seems to help.

I found a similar issue at React-Spring useTransition shuffles my list items around but both the original and the "solution" sandbox are broken. Also just migrating to a newer version is not a solution for me.

Here is a working minimal example to show the problem : https://codesandbox.io/s/recursing-aryabhata-8u2ri

upgrading to v9 fixes the problem, but I'm still looking for a v8 solution. — DaanH, Aug 03 '20 at 11:13

score 1 · Accepted Answer · answered Aug 03 '20 at 09:54

Your problem is very frustrating, because it should work and it is such a simple example. I could not figure an easy fix right now. It must something to do with the keys.

But it works for me with the newer versions. If you change to 9.0.0-beta.1 for example.

You can also try the newest 9.0.0-rc.3 version. I'm looking forward for the new 9 release. The transition is completely refactored.

You can read about the changes here: https://aleclarson.github.io/react-spring/v9/#The-useTransition-rework

Your example look like this with 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

In the end I also yielded and upgraded to 9.0.0-rc3. A bad solution in v8 would be to sort the transitions manually like `const transition = useTransition(...).sort(sortBySomeKey);` to force the correct order, but that would not give the correct results in all cases. — DaanH, Aug 03 '20 at 11:09
In the end they will release the v9 version and upgrading the website so we have the right documentation. I will also use this version if I starting a new project now. The transition in the current version has a lot of weird behavior sometimes. — Peter Ambruzs, Aug 03 '20 at 12:54

items shuffled during transition-out of usetransitions

1 Answers1