Subscribe on changes!

FLIP Animation not applied when first item spliced

avatar
Dec 3rd 2020

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

avatar
Dec 3rd 2020

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

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

avatar
Dec 3rd 2020

caused by this commit e2618a632d4add2819ffb8b575af0da189dc3204 in this PR #2597.

avatar
Dec 3rd 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.