search

reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.16k stars 650 forks source link

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

Open tsiq-swyx opened 6 years ago

tsiq-swyx commented 6 years ago

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: https://github.com/reactjs/react-transition-group/issues/73

jquense commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

tsiq-swyx commented 6 years ago

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 commented 5 years ago

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

IGassmann commented 5 years ago

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