Description
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!