<div id="root">
<button @click="handleAdd">Add</button>
<button @click="handleRemove">Remove</button>
<transition-group tag="ul">
<li v-for="item in list" :key="item">{{item}}</li>
</transition-group>
</div>.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(30px);
}
.v-enter-active,.v-leave-active{
transition: all 1s;
}var vm = new Vue({
el: '#root',
data: {
list: [1,2,3]
},
methods: {
handleAdd() {
this.list.push(this.list.length + 1)
},
handleRemove() {
this.list.pop()
}
}
})
External CSS
This Pen doesn't use any external CSS resources.