Skip to content

Transition component animates when wrapper is replaced #9628

Closed
@shai126

Description

@shai126

Version

2.6.8

Reproduction link

https://jsfiddle.net/shai/nujtes67/15/

Steps to reproduce

Press the Change screen button to toggle between screen 1 and screen 2.

What is expected?

Nothing should fade, and nothing should be logged to console, because the v-if within the <transition> is always true.

What is actually happening?

On each press B fades in again and enter: B (custom component) gets logged to the console.


I've included A as well as B, to show that the bug only occurs when using a custom component with a <transition> and <slot>. A uses the <transition> directly, and doesn't exhibit the buggy behavior.

NB I've also noticed that if the custom component is switched to being functional instead, then it begins working correctly the same as A.

So it appears to only be reproducible when using a custom component and <slot>, even though this is what the docs recommend: https://vuejs.org/v2/guide/transitions.html#Reusable-Transitions

Or, it's possible that I've misunderstood the expected behavior of a <transition> inside of a keyed or otherwise newly appearing component. In which case there's still a bug, because in that case A and B should BOTH be fading and logging to console (though that seems weird to me: the <transition> isn't appear=true, so the fact that its parent is newly appearing shouldn't affect it…)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions