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.

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

List move transitions not working as expected in SVG elements #11310

Open
callumacrae opened this issue Apr 14, 2020 · 5 comments
Open

List move transitions not working as expected in SVG elements #11310

callumacrae opened this issue Apr 14, 2020 · 5 comments

Comments

@callumacrae
Copy link

callumacrae commented Apr 14, 2020

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
Copy link
Author

callumacrae commented Apr 14, 2020

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
Copy link
Member

posva commented Apr 14, 2020

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
Copy link
Author

callumacrae commented Apr 15, 2020

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

@posva

This comment has been minimized.

@callumacrae
Copy link
Author

callumacrae commented Apr 26, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants