React-spring: Request: mode for useTransition to wait for old values to leave before it inserts new values

[chuckdries]

I'm basically asking for Vue's transition out-in mode, where the leaving state finishes before the entering value exists at all.

Toggle Between Components

Take the following example lifted from the useTransition docs:

const [toggle, set] = useState(false)
const transitions = useTransition(toggle, null, {
  from: { position: 'absolute', opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
})
return transitions.map(({ item, key, props }) => 
  item
    ? <animated.div style={props}>😄</animated.div>
    : <animated.div style={props}>🤪</animated.div>
)

when toggle flips from false to true, the transitions array looks like this over time:

1. [
     { item: false, state: 'leaving'},
     { item: true, state: 'entering'},
   ] 
2. [
     { item: true, state: 'updated'},
   ] 

With my hypothetical out-in mode, new values don't enter until old values leave. The transitions array would look like this:

1. [
     { item: false, state: 'leaving'},
   ]
2. [
     { item: true, state: 'entering'},
   ] 
3. [
     { item: true, state: 'updated'},
   ] 

In this example, only one item ever exists in the array at a time, but that's probably not true of all situations where this flag would work

Real life

My use case is a button which displays a call to action, then after clicked it displays a success confirmation. I want the states to fade, but I don't want them to fade over each other, I want the call to action to fade out, then the confirmation to fade in.

Below is a demonstration of the behavior I previously made by applying CSS classes with timeouts:

I ended up emulating this functionality multi stage transitions, but I had to add an unused stage to delay the enter, and interpolate a nonsense variable in that stage because if a stage doesn't need to change anything it ends immediately.

https://codesandbox.io/s/34q346788p?fontsize=14

I'm wondering if there's a better approach with the APIs we have today, but I would still like this hypothetical in-out mode as this behavior is one I frequently want.

Thank you for all of your hard work on this incredible library!

[drcmda]

have you tried trail?

trail: 100,
order: ['leave', 'enter', 'update],

please let me know how it's going ...

[montogeek]

@chuckdries Did you found a solution? I have the same problem when umounting/fade left and mounting/fade in components, right now they overlap because the new one doesn't wait until the previous one fades out to fade in.

[aleclarson]

I don't think there's a solution for this yet. 😢

If anyone wants to get a PoC going, please build on top of #808 instead of master or v9.