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.

[RemyMachado]

have you tried trail?

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

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

I used your workaround (trail + order properties) and it solved the problem. I couldn't find this order property in the documentation though.

It's a shame that this workaround wouldn't work without a duration config that is equal to the trail config (the opposite of what this library intends to do with physic based animations).

My transition values sample in case it helps someone:
https://codesandbox.io/s/react-spring-single-component-transition-no-overlap-ou0xe?file=/src/App.js

{
    from: { fontSize: 0 },
    enter: { fontSize: 100 },
    leave: { fontSize: 0 },
    trail: ANIMATION_DURATION,
    config: { duration: ANIMATION_DURATION },
    order: ["leave", "enter", "update"]
}

Anyway, thanks.

[joshuaellis]

Closing in favour of #1064 as that contains a POC