Transition fade out-in doesn't work as expected on first load

[clingor]

HTML Markup
<transition name="fade" mode="out-in"> <component :is="selectedModule"></component> </transition>

Components Load
Vue.component('component-a', httpVueLoader.load('app/components/component-a.vue', 'component-a')); Vue.component('component-b', httpVueLoader.load('app/components/component-b.vue', 'component-b')); Vue.component('component-c', httpVueLoader.load('app/components/component-c.vue', 'component-c'));

It appears the out-in transition behaves the same as the in-out transition (Component B fades in before/during Component A fade out), but only on the first load of the component. If switching between previously loaded (cached?) components, transitions behave as expected. Please see the attached GIF demonstrating the behavior.

I've been digging into the source in hopes to address this myself through a pull request, but unfortunately I'm very new to Vue and some of this is still a mystery to me. If there's anything else I can provide, I'm happy to do so. Thanks!

Demo GIF

[FranckFreiburger]

Have you already tested this behavior without using http-vue-loader ?

[clingor]

Yes, sorry I didn't demonstrate this in the GIF. When I include an inline component in the HTML (not loaded by http-vue-loader), that component will transition as expected on the first render. This works as expected side-by-side with components loaded by http-vue-loader.

<script> Vue.component('greeting', { template: '<h1>Hello World!</h1>' }); </script>

If it would help, I can mock up a sample project and attach the zip file later tonight.

[FranckFreiburger]

The issue is related to the async components loading, I can obtain the same behavior without http-vue-loader (look at this example: https://jsfiddle.net/z11fe07p/1959/).
Currently I just asked about this behavior on the forum (https://forum.vuejs.org/t/out-in-transition-with-async-components/11654)

[clingor]

Thank you for looking into this! I'm glad to see you're able to reproduce the behavior. I'll follow your post on the Vue forums. Thanks again!

[FranckFreiburger]

FYI, vuejs/vue#5760

[clingor]

That's great news, thanks for logging the bug!

[FranckFreiburger]

fixed in vuejs v2.3.4

[clingor]

Thanks again for giving this issue attention. Unfortunately, after pulling the latest version it still appears the bug persists. Please see the GitHub repo below for an example demonstrating the issue.

Vue Async Component Bug

Perhaps the issue lies in my code somewhere, or maybe in the transition css?
I've added a comment to the Vue issue with this info.

[FranckFreiburger]

Sorry, the fix is not public yet, wait for v2.3.5 ?

[clingor]

That might be useful for visibility in case somebody else runs into this issue and needs to know the minimum version that fixed it.

[FranckFreiburger]

fixed in vue.js public release v2.4.0 Kill la Kill

fix out-in transition for async components (#5760) (c3cdfcf)

[clingor]

I agree if you want to close this issue since it is out of your hands at this point, but it does appear the issue still exists in Vue 2.4.2. Just commenting for your awareness in case this appears again.

Async Component Transition Bug Demo

[FranckFreiburger]

vuejs/vue#5760 (comment)

[FranckFreiburger]

fixed (see vuejs/vue#6256)