無法讓Vue.js CSS轉換工作？

Question

CSS轉換文檔可以在here找到。

很確定我設置了我的JSFiddle到底需要如何設置才能工作。不完全確定，因爲imo文檔對CSS轉換略有啓發。

有一些非常基本的HTML/CSS我希望能夠使Vue.js創建一個漂亮的淡入淡出效果：

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> 

然而，它似乎並沒有工作。有什麼建議？

JSFiddle

Answer 1

對於您div標籤transition屬性，只需從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>