Version

3.0.3

Reproduction link

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

Steps to reproduce

Change the transition duration under .list-complete-item to 10s. Then click Shuffle repeatedly (like, every second or so).

(the issue happens regardless of the duration but is more obvious at a longer duration)

What is expected?

Items always animate from their current position to the next position in a visually smooth way, regardless whether they are currently in transition.

What is actually happening?

Items jump around haphazardly when Shuffle is clicked during an ongoing transition.

Note the pen used for the example is simply one used in the official docs on list transitions. The issue seem to exist in Vue 2 as well.

Adjust following code works for me.

before:

...
.list-complete-item {
  transition: all 0.8s ease;
  display: inline-block;
  margin-right: 10px;
}
...

after:

.list-complete-item {
  display: inline-block;
  margin-right: 10px;
}

.list-complete-move {
  transition: all 3s ease;
}

...and that is also how the CSS in the docs is explained and presented - the transition property is always to be defined on the -move class.

With that, I don't see any jumping occurring and think we can close this as there's nothing to fix.

After further testing, I found that moving the transition property to the move class fixes transition on Chrome (v86). However, the issue persists on Firefox (v82) even with the move class.

I'll reopen to investigate

This is the same in Vue 2 and likely to be related to how different browser engines compute the positions

From my experience most browsers don't like transitions being changed midway and may visually glitch unless you force a layout reflow (e.g. by doing a computed property access) at the right timing, which might be subtly different between browsers. This might be related to this issue.

I'm personally fine with it working on just Chrome, although it'll be nice if the official examples can be updated to reflect this caveat.

Closing this as we don't see any way to improve this.