Javascript 如何为“创建动画”；v代表；带“的元素”；v-if“；Vue中的语句？

我试图制作一个动画，但这不起作用。我还尝试了过渡组。如何改进此代码以使其可行？ 它根据我的

data.json.js

文件中的数据类别显示了两个不同的列表

还有

转换组

标记，它有错误：

必须键入子项：

模板

<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>

风格

必须键入子项：

您可以在

元素中绑定

：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>

{{elements.title}}

仅澄清上述问题是行不通的，因为您必须为多个列表元素使用一个转换组。然后，在循环中还需要一个键，但是绑定索引不会给您想要的效果-列表中的最后一个元素总是会被设置动画

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

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

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