Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Version

2.5.16

Reproduction link

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

Steps to reproduce

Open the fiddle
Click the “Toggle” button
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!

Issue Analytics

State:
Created 5 years ago
Reactions:3
Comments:9 (3 by maintainers)

Top GitHub Comments

4reactions

rachelnaborscommented, Mar 22, 2018

Woohoo! I managed to break something!

0reactions

danielstgtcommented, Nov 8, 2018

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.

Top Results From Across the Web

Vue transition group use enter/leave instead of move

Enter is triggered when a new item is added; Leave is triggered when an item is removed; Move is triggered when the order...

Animation transitions and triggers - Angular

Combine wildcard and void states in a transition to trigger animations that enter and leave the page: A transition of * => void...

Enter/Leave & List Transitions - Vue.js

List Move Transitions. The <transition-group> component has another trick up its sleeve. It can not only animate entering and leaving, but also changes ......

React Transition Group

If you're using transitions in CSS, you'll probably want to use CSSTransition instead. ... Show the component; triggers the enter or exit states....

How to Add Animations with React Transition Group

'entering'; 'entered'; 'exiting'; 'exited'. We can pass any values and effects to these states to trigger animations of our component ...