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

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

children must be keyed: <li>

可以绑定(bind):key="index"在<li>元素。试试这个:

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