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

Jump to bottom
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 •
edited
Loading

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.

@luwuer luwuer mentioned this issue Nov 12, 2020
Merged
yyx990803 pushed a commit to luwuer/vue-next that referenced this issue Dec 2, 2020
@luwuer @yyx990803
fix(runtime-dom): transition component does not work with "*-leave-fr…
0987bb5 
…om" (vuejs#2593)
yyx990803 pushed a commit that referenced this issue Dec 2, 2020
@luwuer
fix(transition): respect rules in *-leave-from transition class (#2597)
e2618a6 
fix #2593
@luwuer luwuer mentioned this issue Dec 3, 2020
Closed
@Liiked Liiked mentioned this issue Dec 14, 2020
Closed
@github-actions github-actions bot locked and limited conversation to collaborators Oct 30, 2023
yyx990803 pushed a commit that referenced this issue Nov 15, 2024
@Tadehz
fix(transition): reflow before leave-active class after leave-from (#…
4b479db 
…12288)

re-fix #2593
abdullah-wn pushed a commit to Lazy-work/vue that referenced this issue Jan 4, 2025
@Tadehz @abdullah-wn
fix(transition): reflow before leave-active class after leave-from (v…
bd786fa 
…uejs#12288)

re-fix vuejs#2593
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Assignees
No one assigned
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working scope: transition
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(runtime-dom): adjust transition class process luwuer/vue-next
3 participants
@posva @luwuer @skirtles-code