useTransition v9 working example

[joeshub]

Hi

Some folks are having issues with useTransition so I just wanted to link a working example here.

https://codesandbox.io/s/compassionate-fast-yc7ju?file=/src/index.tsx

the biggest change is that useTransition now returns a function that replaces you having to iterate via map

[Emiliano-Bucci]

@joeshub It seems to me that it doesn't work properly 🤔 Is this a bug or something? Because i'm facing the same shutter issue

[joeshub]

@Emiliano-Bucci did some digging, react-spring injects the incoming node into the resulting DOM (via React) which pushes the other outgoing node down, causing a jump initially.

There's a bunch of ways to address this, just adding an absolute position fixes that issue in this example, but again there maybe different options based on your use case.

Here's the absolute positioning fix.
https://codesandbox.io/s/festive-ives-cm9du?file=/src/styles.css

[gandor999]

I had a hard time figuring out why when it transitions it doesn't animate from. This helped me a ton, thank you so much.

[joshuaellis]

The latest beta adds an exitBeforeEnter prop that is specifically used for this case. The old node would exit before the new enter.

[jaguardo]

I was checking out react-spring and came across this working codepen:
https://codesandbox.io/s/animated-hierarchical-list-5hjhz

It looks like useTransition breaks from v8 to v9, specifically the item=>item.text line

  const transition = useTransition(
    showChildren ? children : [],
    item => item.text,
    {
      from: { opacity: 0, transform: 'scaleY(0)', maxHeight: '0px' },
      enter: { opacity: 1, transform: 'scaleY(1)', maxHeight: '1000px' },
      leave: { opacity: 0, transform: 'scaleY(0)', maxHeight: '0px' }
    }
  );

How should it be re-written for the newer version of react-spring?