Vue.jsのCSSトランジションが動作しませんか？

Question

CSSトランジションのドキュメントはhereです。

私はJSFiddleを設定して、移行が正しく機能するように設定する必要があります。ドキュメントがCSSの遷移について少し明るいからではありません。

は、私は素敵なフェード効果を作成するためにVue.jsを可能に期待していたいくつかの非常に基本的なHTML/CSSを持っている：

CSS：

.fade-transition { 
    opacity: 1; 
    transition: all .45s linear; 
} 

.fade-enter, .fade-leave { 
    opacity: 0; 
} 

HTML：

<div class="loading-overlay" v-if="loading" v-transition="fade"> 
    In 5 seconds, this overlay should fade out... 
</div> 

をしかし、それは動作していないようです。何かアドバイス？あなたのdivタグでtransition属性については

JSFiddle

Answer 1

、単にtransition前からv-を削除し、それがうまくいきます。

<div class="loading-overlay" v-if="loading" transition="fade"> 
    In 5 seconds, this overlay should fade out... 
</div> 

Answer 2

だけ移行に変更し、V-推移。

<div class="loading-overlay" v-if="loading" transition="fade"> 
    In 5 seconds, this overlay should fade out... 
</div>