[Feature]: Transition Modes for First-Class Sequential Enter/Leave (instead of Parallel)

[tsiq-swyx]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

Currently, entering and leaving elements run in parallel. You can choose to use CSS to overlay the entering element on top of the leaving element, and you can manually keyframe transitions such that one starts after the other, but this is gnarly as heck (and quite frankly I couldn't find a blogpost on it). In Vue Transition Modes you can just specify mode="out-in" and you're done. I think this is a common enough pattern (and best handled by the library instead of in userland/in css).

What is the expected behavior?

See Vue Transition modes https://vuejs.org/v2/guide/transitions.html#Transition-Modes
and see also Sarah Drasner's page transitions app in Vue vs its React clone

Potentially related issue: #73

[jquense]

i do want to add this, and I think it's totally feasible someone just has to do it. I think i have a started POC adding them to the ReplaceTransition which is a little more akin to the VUE transition. I'll see if i can dig it up

[tsiq-swyx]

cool. idk if i can commit to doing a PR as im pretty full up, its just a thing that ive wished for that came up when Sophie Alpert asked for easy wins

[jquense]

here's the branch if anyone is interested https://github.com/reactjs/react-transition-group/tree/modes-spike

[tsiq-swyx]

lol Kyle Mathews just pointed me to https://github.com/cheapsteak/react-transition-group-plus and it has exactly what we need.. only problem is they forked off 2 years ago...

[igormigas]

So... any chance to get the "out-in" feature running in this package?

[IGassmann]

@tsiq-swyx What's the best way so far you've figured to achieve this?