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>

您可以在: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>

Answer 2

只是为了澄清上面的分析方法是行不通的，因为您必须对多个列表元素使用过渡组。然后，您还需要在循环中使用一个键，但是绑定索引将无法获得预期的效果-列表中的最后一个元素总是会被动画化。

更好地使用：key =“ elements.id”

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

2 个答案: