淡入淡出元素過渡

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的編譯器只會替換元素的內容以提高效率。即使在技術上沒有必要，但總是在組件內鍵入多個項目被認爲是很好的做法。

另外的過渡必須在出-in模式。

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/