Kann Vue.js CSS-Übergang nicht funktionieren?

Question

Dokumentation für CSS-Übergänge finden Sie here.

Ziemlich sicher, dass ich mein JSFiddle genau eingerichtet habe, wie es für den Übergang zur Arbeit eingerichtet werden muss. Nicht ganz sicher, weil die Dokumentation ein wenig Licht auf CSS-Übergänge wirft.

haben einige sehr grundlegende HTML/CSS Ich Vue.js würde es ermöglichen, hatte gehofft, einen netten Fade-Effekt zu erzeugen:

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> 

jedoch es scheint nicht zu funktionieren. Irgendein Rat?

JSFiddle

Answer 1

Für das transition Attribut in Ihrem div Tag, entfernen Sie einfach den v- aus der Zeit vor dem transition und es wird funktionieren.

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

Answer 2

Änderung V-Übergang nur Übergang.

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