エレメントでフェードする

Question

リストがあり、それをvueで実行しています。しかし、フェード効果を使ってその価値を変えたいと思っています。しかし、それはタグここ

で作業されていませんが、私は、V-IFでの作業トランジション効果を持っている例であるが、それはリスト遷移

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

}) 

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

Answer 1

では動作しません。

同じタグ名を持つ要素間を切り替えるときは、一意にキーの属性を付けることによって、それらが別個の要素であることをVueに通知する必要があります。それ以外の場合、Vueのコンパイラは効率のために要素の内容を置き換えます。ただし、技術的には不要な場合でも、コンポーネント内の複数のアイテムを常にキー入力することをお勧めします。

また遷移は、アウトモード上になければなりません。

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'] 
} 
}) 

スニペット： https://jsfiddle.net/L4r64yxk/