Add "exitBeforeEnter" prop to useTransition

[xzilja]

🚀 Feature Proposal

Add exitBeforeEnter property to useTransition hook. This property would be an optional boolean that when set will wait for "leave" animation to complete before starting "enter" animation of new element. Ideally we would also not need to worry about layout issues here and implement "hacks" like absolute positioning.

Motivation

I came across an issue similar to one described here #583
Essentially I want to create a page transition, where "initial" page fades out and only after it is not visible anymore "secondary" page fades in. This should be achievable without complex logic and delays.

Idea is taken from framer motion https://www.framer.com/api/motion/animate-presence/#animatepresenceprops.exitbeforeenter

I am down to try and implement this, but I am not sure where to start and if this is something that falls into the scope of the library.

Example

const transition = useTransition(toggle, {
   from: { opacity: 0 },
   enter: { opacity: 1 },
   leave: { opacity: 0 },
   exitBeforeEnter: true
});

// ...

transition((style, props) => {
  return <a.div style={style}>{toggle ? 🟢 : 🔴}</a.div> 
})

[tomdohnal]

This definitely is a pain point for me. It can now be "simulated" using the trail property and absolute positioning although it's not always ideal. Using position: absolute makes the parent element not take up the space of its children which can break the layout

Vue.js also offers similar functionality with "transition modes" https://vuejs.org/v2/guide/transitions.html#Transition-Modes

[tomdohnal]

I actually think that this functionality could be achieved just using the public react spring API, specifically using the onRest properties.

You could extract it into your own "useSwitch" or similar one.

I'll try to whip up a PoC and post a Codesandbox link here later this week

[tomdohnal]

Here is a PoC
https://codesandbox.io/s/boring-shadow-v66x2?file=/src/App.js

[RemyMachado]

Here is a PoC
https://codesandbox.io/s/boring-shadow-v66x2?file=/src/App.js

First of all, thank you for your PoC!

It's a great workaround that uses the physic config! Unfortunately I struggle implementing it with a single component that should leave and enter on each prop changes like I explained here:
#583 (comment)

Do you think it's feasable with a single component? @tomdohnal

[joshuaellis]

I've released this on 9.4.0-alpha.0. It is experimental i.e I did it in a hour because I need it for a work project, but if there are any obvious bugs you experience, please report them on here cause that will help me refine it into a stable addition! ⭐

[yaroslavdraha]

@joshuaellis
Hi there! I'm experiencing a problem using useTransition and exitBeforeEnter, not sure if it's related to specifically this thread, but I will create a new bug if not.

My goal is to show two blocks and change them with a timeout (check the sandbox). For some reason, the animated components are gone when I change the tab in the browser for around 5 sec. I cannot reproduce that without exitBeforeEnter. Please help me, it's critical for my current project. Thank you ❤️

Codesandbox:
https://codesandbox.io/s/exitbeforeenter-removes-components-on-browser-tab-change-krs5jo

Video example
https://drive.google.com/file/d/1Pf1qfAI6FZxHlZPwwzVF_z49MZbHy3Vi/view?usp=sharing

[karenbanci]

Hello @yaroslavdraha ,

I'd like to know if your problem was solved.

Thanks,