List move transitions not working as expected in SVG elements

[callumacrae]

Version

2.6.11

Reproduction link

https://codepen.io/callumacrae/pen/eac1209c4a6f0dab5c75a3612145a465

Steps to reproduce

Click the shuffle button

What is expected?

Both transitions should be identical

What is actually happening?

Some of the elements are reappearing at the top - possible being deleted from the DOM and new ones being created? Not sure how to debug this, but something isn't right!

It's not happening very time to every element - sometimes they work as expected.

Also, sometimes the flip-list-move class isn't being removed at all.

---

Copied the HTML example from the docs to make as similar as possible to a working example: https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions

[callumacrae]

I've added a third column without the transition-group as I figure it's actually not needed inside an SVG where the transform is being handled manually, and it looks like the issue could be different to what I initially thought it was - it looks like that despite the keys not changing, vue is removing some of the elements from the DOM and adding new ones.

It also seems to be related to where they are - the one that was previously at the top is always transitioned, the others sometimes transition and sometimes don't.

[posva]

Don't you need to provide the coordinates to the text:

 <div>
      <p>svg:</p>
      <svg width="400" height="400">
        <transition-group name="flip-list" tag="g">
          <g v-for="(item, i) in items" :key="item" >
            <text :x="40" :y="i * 40 + 50">{{ item }}</text>
          </g>
        </transition-group>
      </svg> 
    </div>

otherwise the transform applied to the element won't be correct

[callumacrae]

That's one way of doing it, but in my actual usage there are three elements inside the <g> so it's better to have a transform on the <g> than to duplicate the y position three times (and in turn have three times the amount of transitions).

That does work though - I've added it as a 4th column on the codepen

[callumacrae]

Did some more digging and haven't found anything conclusive, but found that it's only the move transitions that aren't behaving as expected - adding and removing items is working as expected: https://codepen.io/callumacrae/pen/db11985ff39e92e8cd898a23e6eeda0e