Skip to content

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

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in 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)

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
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 (#…

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
Loading
Loading status checks…
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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
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