Skip to content
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

FLIP Animation not applied when first item spliced #2712

Closed
crutchcorn opened this issue Dec 3, 2020 · 3 comments · Fixed by #2716
Closed

FLIP Animation not applied when first item spliced #2712

crutchcorn opened this issue Dec 3, 2020 · 3 comments · Fixed by #2716
Labels
🐞 bug Something isn't working scope: transition

Comments

@crutchcorn
Copy link

Version

3.0.4

Reproduction link

https://codepen.io/crutchcorn/pen/ZEpbZKX

working_vs_broke

Steps to reproduce

https://v3.vuejs.org/guide/transitions-list.html#list-move-transitions

That's at this link:

https://codepen.io/team/Vue/pen/373b4429eb5769ae2e6d097fd954fd08

Change the remove method to match:

      this.items.splice(0, 1)

What is expected?

The first item in the array is removed and an animation smooths out the other items moving into the first spot

What is actually happening?

It jerkily moves the items to the first index
@crutchcorn crutchcorn mentioned this issue Dec 3, 2020
Closed
@crutchcorn
Copy link
Author

I have just ran this same issue against 2.6.12 and confirmed that it does indeed work:

https://codepen.io/crutchcorn/pen/oNzjOGm

@edison1105
Copy link
Member

edison1105 commented Dec 3, 2020 •
edited
Loading

caused by this commit e2618a6 in this PR #2597.

@edison1105 edison1105 mentioned this issue Dec 3, 2020
Closed
@posva posva added 🐞 bug Something isn't working scope: transition labels Dec 3, 2020
@luwuer
Copy link
Contributor

luwuer commented Dec 3, 2020

It happend because transition-property: none will be added to el as inline style on the first frame, so a workaround way is using transition-property: all !important; to cover it.

luwuer added a commit to luwuer/vue-next that referenced this issue Dec 3, 2020
@luwuer
fix(runtime-dom): ensure styles from *-leave-active can trigger trans…
9d5546c 
…ition on the first frame (vuejs#2712)
@luwuer luwuer mentioned this issue Dec 3, 2020
Merged
yyx990803 pushed a commit that referenced this issue Dec 3, 2020
@luwuer
fix(transition): ensure styles from *-leave-active trigger transition (…
3f8f9b6 
…#2716)

fix #2712
@github-actions github-actions bot locked and limited conversation to collaborators Oct 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
🐞 bug Something isn't working scope: transition
Projects
None yet
Milestone
No milestone
4 participants
@posva @edison1105 @crutchcorn @luwuer