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!