淡入淡出元素过渡

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/