Vue中列表过渡
标签:<transition-group>
<template>
<div>
<h2>Vue中的列表过渡</h2>
<transition-group>
<div v-for="item of list" :key="item.id">{{item.name}}</div>
</transition-group>
<button @click="addItem">添加</button>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
num: 0,
};
},
methods: {
addItem() {
this.list.push({
id: this.num++,
name: "hello",
});
},
},
};
</script>
<style scoped>
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: opacity 1s;
}
</style>