Vue: out-in transition issue with async components

Thanks, looks like a bug. Thanks for the concise and clear repro 🙂

It seems the async component is rendered too early

I have solved, wait a minute ...

When rendering async components, we need to use a hidden element placeholder

Are you sure this solves the async component transitions? I'm new to Vue so it's likely a bug in my code, but my repo below still exhibits the transition out-in bug where the incoming component doesn't wait for the out fade to complete. Note I'm using the http-vue-loader named above.

Async Component Transition Bug Demo

This is indeed still failing with the same repro. The transition starts right away as @clingor said

@posva

https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js

Looks like this version does not contain the fix code

The fix has not been released yet. We closed issues when the patch lands in the dev branch, but it might not be in a public release yet.

2.3.4 only contains a single fix for a memory leak (which has higher priority)

My bad, I just saw the commit was before the release and thought it was strange. It would have been in the release notes anyway

Sorry for the misunderstanding, and thank you for confirming the issue!

This doesn't appear to be fixed yet in 2.4.2. Is this still pending release?

Async Component Transition Bug Demo

@clingor Are you sure? The jsfiddle works nicely

The fiddle does work correctly, but the code in my example GitHub repo still exhibits the same behavior. It could be the http-vue-loader helper library, or maybe something in my code. This example is simple and was created to demonstrate the issue.

@FranckFreiburger would any of these VueJS changes require an update to http-vue-loader?

if you put the issue on a jsfiddle without the loader I can take a look

Am 21.07.2017 21:16 schrieb "Chris Lingor" notifications@github.com:

This doesn't appear to be fixed yet in 2.4.2. Is this still pending
release?

Async Component Transition Bug Demo
https://github.com/clingor/githubIssuesFileShare/tree/master/vue-async-component-bug

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/5760#issuecomment-317088909, or mute
the thread
https://github.com/notifications/unsubscribe-auth/Aclno69wDoTlZziST6eSocqxEnn8mFx-ks5sQPkKgaJpZM4Nng7j
.

The culprit is <keep-alive> !

Steps to reproduce

1. see https://jsfiddle.net/z11fe07p/2382/
2. click the "B" button

@posva, are you able to reproduce ?

@FranckFreiburger You should open a new issue for that. Thanks BTW 😉