思路：
- 完成页面结构及 添加数据和删除数据逻辑
- 包裹列表使用transition-group标签，将该有的类名加上。这样写了效果是有了，但是过渡比较生硬，如何让它平滑一点？
- 加v-move类名
<style>
.slide-enter, .slide-leave-to {
}
.slide-leave, .slide-enter-to {
}
.slide-enter-active {
animation: slide-in 2s ease-out;
}
.slide-leave-active {
animation: slide-out 2s ease-out;
/* 这里在离开的时候，需要让这个元素脱离标准流，不然后面的元素动不了 */
position: absolute;
}
/* 想要让动画平滑一点，需要加v-move的类名，v-可以别name的值 */
.slide-move {
transition: all 2s;
}
@keyframes slide-in {
from {
transform: translateY(50px)
}
to {
transform: translateY(0)
}
}
@keyframes slide-out {
from {
transform: translateY(0)
}
to {
transform: translateY(50px)
}
}
</style>
<body>
<div id="app">
<button @click="addItem">添加数据项</button>
<ul>
<transition-group name="slide">
<li v-for="(item, index) in list" :key="item" @click="removeItem(index)">{{item}}</li>
</transition-group>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4]
},
methods: {
addItem() {
this.list.push(this.list[this.list.length-1] + 1)
},
removeItem(idx) {
this.list.splice(idx, 1)
}
}
})
</script>
</body>
