动画-使用transition-group元素实现列表动画|学习笔记

<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 =’ ’
}
}