Überblendung mit Element Übergang

Question

Ich habe eine Liste und ich führe es mit vue. Aber ich möchte den Fade-Effekt verwenden, um seinen Wert zu ändern. Aber es ist nicht mit dem Tag arbeitet

Hier ist ein Beispiel, wo ich den Übergangseffekt habe die Arbeit mit V-wenn, aber es funktioniert nicht mit der Liste Übergang

new Vue({ 
el:'#test', 
data:{ 
    counter:0, 
    show:true, 
    foo:['a','b','c'] 
} 

}) 

https://jsfiddle.net/kv3s2y6z/2/

Answer 1

Wenn Sie zwischen Elementen wechseln, die denselben Tag-Namen haben, müssen Sie Vue mitteilen, dass es sich um unterschiedliche Elemente handelt, indem Sie ihnen eindeutige Schlüssel-Attribute zuweisen. Andernfalls ersetzt der Compiler von Vue nur den Inhalt des Elements aus Effizienzgründen. Auch wenn es technisch nicht notwendig ist, wird es als bewährte Methode angesehen, immer mehrere Elemente innerhalb einer Komponente zu markieren.

Auch der Übergang muss auf out-in-Modus sein.

HTML:

<div id="test"> 
    <transition name="fade" mode="out-in"> 
    <p :key="foo[counter]"> 
     {{ foo[counter] }} 
    </p> 
    </transition> 
    <button @click="counter++"> 
    next 
    </button> 
    <button @click="counter--"> 
    before 
    </button> 
</div> 

JS:

new Vue({ 
el:'#test', 
data:{ 
    counter:0, 
    show:true, 
    foo:['a','b','c'] 
} 
}) 

Snippet: https://jsfiddle.net/L4r64yxk/