如何在 Vue 中使用"v-if"语句为"v-for"元素创建动画？

Question

我试着制作一个动画，但没有成功。我也试过transition-group。如何改进此代码以使其可行？它根据我的data.json.js文件中的数据类别显示了两个不同的列表。

还有transition-group标签，它有错误：<transition-group> children must be keyed: <li>

模板

<button @click="switcher = !switcher">SWITCH</button>
<transition name="fade">
<li v-for="elements in myData" v-if="elements.key == getKey()">
<span>{{elements.title}}</span>
</li>
</transition>

脚本

data() {
return {
switcher: true,
}
getKey(){
if (this.switcher) {
return 'KEY'
} else {
return 'ANOTHER KEY'
}

样式

.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave {
opacity: 0;
}

Answer 1

子级必须键入：<li>

您可以在<li>元素中绑定:key="index"。试试这个：

<transition name="fade">
<li v-for="(elements, index) in myData" :key="index" v-if="elements.key = getKey()">
<span>{{elements.title}}</span>
</li>
</transition>

Answer 2

仅仅为了澄清上面的anser是不起作用的，因为您必须为多个列表元素使用转换组。然后，循环中还需要一个键，但绑定索引不会产生所需的效果——列表中的最后一个元素总是会被设置动画。

更好地使用：key="elements.id">