Transition component should handle leave transition for Transition.Child when it's unmounted #2617
thiemeljiri
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Hi.
From what I've read and tried, achieving the following with
@headlessui/react
<Transition>
component is impossible. There are cases when it's impossible to simply toggle the content viashow
prop. Very often you need to animate dynamically rendered content. Currently it's impossible with the<Transition>
component as it doesn't handle the leave animation of unmounted children. It should keep it in the DOM until tre transitions are finished. Without this feature migration is impossible on many projects.Are there any plans to implement this? Or does any workaround already exist?
Thanks!
In this example the
content
is dynamically changed upon user interaction and it slides to left/right and new content is revealed.(The altering of the animation direction is also something that is quite often necessary. Both
<CSSTransition>
and<Transition>
can't handle dynamically changed classes - it won't affect the current transition, but only the next one. This can be solved some other way - class or data attribute on the wrapper and using it in the selectors for the animation classes. But it would be nice if this was also achievable without this workaround.)Example of
<SubComponentThatRendersTheConentent>
:Relevant CSS for the example above:
Beta Was this translation helpful? Give feedback.
All reactions