Description
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…)