Vue: <transition-group> and v-show triggers move transition on enter

[chrisvfritz]

Version

2.5.16

Reproduction link

https://jsfiddle.net/chrisvfritz/845Lee66/

Steps to reproduce

1. Open the fiddle
2. Click the "Toggle" button
3. Watch the move transition trigger on enter

What is expected?

Just like with v-if, move transitions should not be triggered on enter (note that it is already _not_ triggered on leave).

What is actually happening?

I haven't checked in the source yet, but I'm guessing that since elements with display: none still technically have coordinates:

DOMRect { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 }

The move transition is triggered on enter. I'm not sure why it wouldn't also occur on leave though.

---

This may be connected to #5800. Also, special thanks to @rachelnabors for finding this bug!

[rachelnabors]

Woohoo! I managed to break something!

[vctt94]

Can I give this issue a try?

[jkzing]

@vctt94 Of cause, welcome 😃

[wlkuro]

this coordinate is using getBoundingClientRect method to get value.
getBoundingClientRect method is value 0 when display: none

How about change of line 8424 of vue.js
c$1.elm.style.display = 'block';
c$1.data.pos = c$1.elm.getBoundingClientRect();

The value can be taken

[vctt94]

hey @wlkuro, I believe you are right, and that is the cause. But we are not supposed to make changes on dist files. It is a self generated file, but the change you suggested does work.

[pengchongfu]

@wlkuro @vctt94 I think a better solution is not to add v-move on element and and not to execute _enterCb just like v-if.

[vctt94]

I see, what exactly this _enterCb does?

[pengchongfu]

@vctt94 sorry for not seeing your pr 😭
_enterCb should be executed when enter transition was finished or move transition was triggered.
but I think it is better that v-show has similar behavior as v-if.
if _enterCb was executed, v-show would lose enter transition.

[danielstgt]

I was playing around with an example from the docs and hit the same issue as described (e.g. toggle button: https://codepen.io/pen/BGjJGL).

Since the PR is still open - are there currently any workarounds for this? Using v-if works perfectly but is not an option due to performance reasons.