Vue: transition-group replacing group flicker

[phouri]

Version

2.5.22

Reproduction link

https://codesandbox.io/s/y3910wr9j9

Steps to reproduce

Click the change button in the link, no matter if animation is on or off (changing the animation name) - there is a brief flicker where both groups are present.

This is barely visible in this scenario, but on a full page and more rows it's a lot more visible.
(Might need to click multiple times to notice)

What is expected?

Groups would transition "atomically" without having a moment where both groups are present

What is actually happening?

Both groups are present for a moment

---

The only way to solve this is to remove the the transition-group component completely, not even changing the name of the transition to null or something that doesn't match works.

Happened when I was working on a data table and was using the move transition for sorting, and then when replacing rows completely I saw this flicker and couldn't get around it easily.

[posva]

You have two workarounds, either use a key on transition-group to change it while changing lists which would make the most sense since you are replacing the whole list anyway. Or add some CSS to make the animation immediate and hide the elements while leaving

.test-enter, .test-leave-to {
  display: none;
}

I think this is expected because you are using a transition but you don't want one. As described in the docs, transitions add leave + leave-active, then removes leave and adds leave-to (after a tick) when removing elements, then removes leave-active and leave-to.
To make transitions work when we don't want one, we would need to check for a transition-duration of 0. But it's making the transition work in a scenario it is not needed.

[phouri]

I tried doing the display:none thingy when I tried working around the case - but that didn't work. it also doesn't work in the example (I added the display:none and the transition-duration 0 and still seeing the flicker - did I do it wrong?).

About checking if the whole group changed - it's not always trivial, especially in a data table that will have pagination, sorting, filtering etc, and sometimes only some element change.

[phouri]

Perhaps the best solution to this would be to explicitly say what transitions I am interested in for a transition-group with a default for all - (also maybe for normal transition? not sure if that's already implemented).

[posva]

adding

.test-enter,
.test-leave-to {
  display: none;
}

does work tho

[phouri]

https://codesandbox.io/s/y3910wr9j9 nope - unless I did something wrong here - I can still see both groups at the same time.

[phouri]

@posva it seems the display: none does indeed works around the issue - it seems I needed to refresh after saving the code sandbox, sorry about that!

@LinusBorg I was using Date + index just to mimic a random id, it works now because of the display: none I added, I will remove it from the example though as to not confuse.

[phouri]

To summarise: Workaround is working - I added to the example with and without workaround, wether to close this or leave open - up to you guys, thanks! :)

[Autumn-Paint]

What?
--xiaobai

[shadow7412]

@phouri can you please provide a codesandbox.io link with the working example?

[phouri]

https://codesandbox.io/s/y3910wr9j9 the example before has the workaround (click on the right button). I must say I think that it worked ok in this example but when I tried in a heavy application scenario it wasn't perfect.

[grumpygary]

I have a related question, about transition keys.

I checked the Vue source code (2.6.10). It appears that it does not respect key names for transitions -- it mangles it to includes its own prefix (__transition-${this._uid}- + myKey) , which is subject to change if a prop changes. This appears to have been on-purpose (it literally checks to make sure it's using the internal prefix). I consider this a bug, as it causes a full re-render of the transitioned vnode if all I want to do is change the exit transition class.

For example, I might have a "stack" of pages that slide to the left to exit when going forward, or to the right to enter if going backwards; otherwise no animation. So the transition depends on what the user is doing. The enter transition is not the issue, but if I change the leave active class, Vue will change the transition key, which will re-render the page (though nothing has changed), causing a brief flicker.

And I can't find a work around...

My question(s): what is the rationale for not respecting a supplied transition key? And is there a work-around?