Skip to content

Transition component does not work with "*-leave-from" #2593

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
luwuer opened this issue Nov 12, 2020 · 3 comments · Fixed by #2597
Closed

Transition component does not work with "*-leave-from" #2593

luwuer opened this issue Nov 12, 2020 · 3 comments · Fixed by #2597
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working scope: transition

Comments

@luwuer
Copy link
Contributor

luwuer commented Nov 12, 2020

Version

3.0.2

Reproduction link

https://codesandbox.io/s/transition-leave-bug-evexs

Steps to reproduce

https://codesandbox.io/s/transition-leave-bug-evexs

What is expected?

When trigger leave, the font color should translate from red to default.

What is actually happening?

  1. Properties in class *-leave-from not work.
  2. The class *-leave-from affects the normal operation of transition component.

The reason is related to the process of adding/removing css-class, i would like to fix it.

@posva
Copy link
Member

posva commented Nov 12, 2020

It looks like adding a property to be removed right away (in this case the color: red being only in leave-from) breaks the transition. To workaround it, you can add a color property to .test-leave-to

@posva posva added 🐞 bug Something isn't working scope: transition has workaround A workaround has been found to avoid the problem labels Nov 12, 2020
@skirtles-code
Copy link
Contributor

An alternative workaround is to put transition: none; in .test-leave-from.

@luwuer
Copy link
Contributor Author

luwuer commented Nov 12, 2020

Thanks in the first place.

In fact, i create this example on purpose. Because i find current logic does not deal with this scence when im dealing with another issue.

# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working scope: transition
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants