开发者学堂课程【Vue.js 入门与实战：动画-使用 transition-group 元素实现列表动画】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8170
动画-使用 transition-group 元素实现列表动画
目录：
一、 实现添加时候的动画效果
二、 实行列表的融合
一、 实现添加时候的动画效果
之前已经学习了单个元素的动画，无论是小球，还是第三方动画库，还是自己定义的V-enter这些类名，都是控制单个元素。但如果是列表的话，需要通过以下方案来实现动画：
新建一个 Vue 列表，如何实现动画效果
新建一个窗口
<script>
// 创建vue实例，得到ViewMode1
var vm = new Vue({
el: ‘#app’,
data: {
list: [
{id:1,name:‘赵高’}
{ id: 2,name:'秦桧’}，
{ id: 3, name: '严嵩:}，
{ id: 4, name:’魏忠贤’}
]
}
Methode:{ }
});
</ script>
<li v-for-"iten in list" :key-"item.id">
{{item.id}} --- {{item.name}}_
</li>
设置字体颜色 边距
<style>
li {
border:1px dashed #999；
margin:5px;
line-height:35px;
padding-left:5px;
font-size:12px;
}
li:hover{
background-color:pink;
transition: all 0.4s ease;
}
.v-enter,
.v-leave-to(
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active,{
Transition:all 0.6s ease;
}
</style>
此时，执行，我们可以看到执行效果为：
二、实行列表的融合
<div>
<label>
Id:
<input type "text" v-model="id">
</label>
<label>
Name:
input type-"text" v-model-"name">
</label>
<input type=”button” value=”添加” click=”add”>
</div>
<ul>
<!—在实现列表过程的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用transition包裹，需要使用transitionGroup-->
<transition-group>
<li v-for-"iten in list" :key-"item.id">
{{item.id}} --- {{item.name}}_
</li>
</transition-group>
</ul>
<script>
//创建Vue实例，得到viewMode1
var vm = new Vue ((
e1: "#app' ,
data: {
id:‘ ’，
name‘‘,
list: [
{ id: 1, name:'赵高’}，
{ id: 2,name:'秦桧’}，
{ id: 3, name: '严嵩:}，
{ id: 4, name:’魏忠贤’}
]
},
methods:{
add() {
this.list.push({ id: this.id,name:this.name })
this.id = this.name =’ ’
}
}
注意：如果要为 v-for 循环创建的元素设置动画，必须要为每一个元素设置：key 属性。
这就实现了添加时的动画效果。
