out-in transition issue with async components

[FranckFreiburger]

Version

2.3.0

Reproduction link

https://jsfiddle.net/z11fe07p/1959/

Steps to reproduce

• load https://jsfiddle.net/z11fe07p/1959/
• click the "B" button

What is expected?

The previous component (A) should disappear before component B appears

What is actually happening?

Components A and B are visible simultaneously

---

This behavior is happens only when component B is not already loaded. Next time you switch from A to B, everything is fine.

[posva]

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

[gebilaoxiong]

It seems the async component is rendered too early

[gebilaoxiong]

I have solved, wait a minute ...

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

[clingor]

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

[posva]

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

[gebilaoxiong]

@posva

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

Looks like this version does not contain the fix code

[yyx990803]

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)

[posva]

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

[clingor]

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

[clingor]

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

Async Component Transition Bug Demo

[posva]

@clingor Are you sure? The jsfiddle works nicely

[clingor]

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?

[posva]

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

[SubheKhalaf]

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 <#5760 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Aclno69wDoTlZziST6eSocqxEnn8mFx-ks5sQPkKgaJpZM4Nng7j> .

[FranckFreiburger]

The culprit is <keep-alive> !

Steps to reproduce

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

[FranckFreiburger]

@posva, are you able to reproduce ?

[posva]

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