オンデマンドコンポーネントのVueトランジションモードが動作しない

Question

私は複数のページを持つSPAを持っています。ページはコンポーネントであり、Web Packのコード分割を使用してオンデマンドでロードされます。

ページは<transition mode="out-in">というタグで囲まれていますが、最初のコンポーネントの読み込みでは順次遷移は機能しません。

ここにエラーhttps://github.com/ByEmke/vue-transition-mode-issueを再現するgit repoがあります。

[編集] 遷移モードに関する質問を強調したいと思います。これは動作しない移行モードです。 'out-in'は消えていく要素を緩和し、出現する要素を緩和しなければならず、これは順番に起こるはずですが、（遷移モードが設定されていないので）並列で起こります。最初のコンポーネントのロードでは動作しません（実行時にGithubの例で明示的に表示されます）。しかし、後で切り替えるときはうまく動作します。私はより多くの情報を使用して ：ここ

が発行しhttp://recordit.co/mtiNGNUNCp

Answer 1

を試してみて、今のところ、私は相対的なdiv要素で、私のページをラップし、絶対にトップにページを配置し、モンキーパッチをつもりスティックです。

http://recordit.co/KXFrymElAR

P.S.ページの下にコンテンツがいくつかあった場合、親の高さが0であるため、このパッチは機能しませんでした。これは私のユースケースでは機能しますが、オンデマンドのコンテンツの下にコンテンツが必要な場合、要求コンポーネント。

githubの例に続いて、このテンプレートは、今どのように見えるかです：

<div id="app"> 
    <div> 
     <transition name="ease" mode="out-in" appear> 
      <component :is="page"></component> 
     </transition> 
    </div> 

    <button @click="first">First page</button> 
    <button @click="second">Second page</button> 
</div> 

とスタイリング：

div { 
    position: relative; 
} 

h2 { 
    position: absolute; 
    top: 0; 

    &.ease-enter-active, &.ease-leave-active { 
     transition: opacity 0.2s ease; 
    } 
    &.ease-enter, &.ease-leave-active { 
     opacity: 0; 
    } 
} 

Answer 2

を示すGIFだ私はあなたがドキュメントhere

EDITから遷移ノード

<transition appear> 
    <!-- ... --> 
</transition> 

にappearディレクティブを逃していると思いますmain.vueの移行CSSだと思います。

<style lang="sass"> 
    h2 { 
     &.ease-enter-active, &.ease-leave-active { 
      transition: opacity 1s ease; 
     } 
     &.ease-enter, &.ease-leave-active { 
      opacity: 0; 
     } 
    } 
</style> 

だから、この

<style lang="sass"> 
    .ease-enter-active, .ease-leave-active { 
     transition: opacity 1s ease; 
    } 
    .ease-enter, .ease-leave-active { 
     opacity: 0; 
    } 
</style>