思路：
- 完成頁面結構及 添加數據和刪除數據邏輯
- 包裹列表使用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>
