Vue.js Übergangsstaffel funktioniert nicht

Question

Ich versuche, eine Liste mit v-for gerendert zu bekommen, um seine Build in die Vuejs Dokumente zu staffeln. Ich verwende das stagger Attribut und feuere ein Vue.nextTick Flag, um den Übergang zu Feuer direkt nach ready Auslöser zu bekommen. Ich bin mir nicht sicher, ob ich etwas verpasse. Verwenden von Vue 1.0.26. Irgendwelche Ideen?

Demo: http://codepen.io/thelucre/pen/WGQaPd

Docs: http://vuejs.org/guide/transitions.html#Staggering-Transitions

Answer 1

Die gestaffelten Übergänge werden nur ausgelöst, wenn die Daten für die v-for Richtlinie tatsächlich ändern, nicht im Fall von v-show oder v-if. In meinem Fall verwende ich dann eine berechnete Eigenschaft, die ein leeres Array enthält, und legt dann die Daten nach dem Funktionsaufruf nextTick() fest.

aktualisiert Demo: http://codepen.io/thelucre/pen/WGQaPd

Antwort Quelle: https://github.com/vuejs/vue/issues/3658#issuecomment-246256099

Answer 2

Ist this, was nach dem du bist?

Ihr Übergangsattribut wurde auf Fade eingestellt.

<div v-if="show" v-for="item in items" transition="fade" stagger="1000" class="item">{{ item }}</div> 

Ich änderte es zu versetzt und kopierte das CSS aus dem Beispiel in der Dokumentation.