Transition component animates when wrapper is replaced

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

[posva]

Seems to be unrelated to slots as it also happens with

Vue.component('my-transition', {
	template: `<transition name="fade" @enter="enter"> <p>heheeh</p></transition>`,
  methods: {
  	enter() {
    	console.log('enter: A (regular)');
    },
  }
});

[shai126]

Thanks. Updated repro: https://jsfiddle.net/shai/nujtes67/18/

[shasharoman]

I tested some behaviors of custom my-transition and built-in transition, but I'm not sure which ones are expected, like below：

• self has v-if，results:

• transition without fade-in has fade-out
• my-transition has fade-in and fade-out

• parent has v-if，results:

• transition without fade-in and fade-out
• my-transition has fade-in without fade-out

If you change v-if to v-show, the behavior will be different, I think this is also a bug. But now, I hope that people who use vue will tell me what is the correct behavior in the above situation?

After clear purpose, if I have the ability to correct it correctly, I will continue to modify the code.