2019年8月16日
一、列表添加动画
首先先生成列表,如果使用v-for循环创建的动画,必须为每一个元素设置:key属性
<transition-group>
<li v-for="item in list" :key="item.id"> <!--如果要为v-for循环创建的元素设置动画,必须为每一个元素设置:key属性-->
{{item.id}} ---{{item.name}}
</li>
</transition-group>
在实现列表过渡的时候,如果需要过渡的元素,是通过v-for 渲染出来的,不能使用transition包裹,需要使用transitionGroup
二、列表删除动画
为li元素添加单击事件
<transition-group>
<li v-for="(item,i) in list" :key="item.id" @click="del(i)"> <!--如果要为v-for循环创建的元素设置动画,必须为每一个元素设置:key属性-->
{{item.id}} ---{{item.name}}
</li>
</transition-group>
事件代码,变量i是根据单击的li的ID传来的,单击哪条就传回改条li的ID-1
splice(i,1)是从i起删除一行
del(i){
this.list.splice(i,1)
}
给transition-group添加appear属性,实现入场的效果,tag属性就是指定渲染到页面中的标签
如果不指定tag属性 则会自动渲染为span标签, 这样是不好的
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)"> <!--如果要为v-for循环创建的元素设置动画,必须为每一个元素设置:key属性-->
{{item.id}} ---{{item.name}}
</li>
</transition-group>
添加和删除的源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
li{
border:1px dashed red;
margin:5px;
line-height:35px;
padding-left: 5px;
width:100;
}
.v-enter,
.v-leave-to{
opacity:0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active{
transition:all 0.6s ease;
}
.v-move{ /*下面的 .v-move和.v-leave-active 配合使用,能够实现列表后续的元素渐渐飘上来的效果*/
transition:all 0.6s ease;
}
.v-leave-active{
position:absolute;
}
</style>
</head>
<body>
<div id="app">
<div>
<label for="">
ID:
<input type="text" value="" v-model="id">
</label>
<label for="">
name:
<input type="text" value="" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<ul> <!--在实现列表过渡的时候,如果需要过渡的元素,是通过v-for 渲染出来的,不能使用transition包裹,需要使用transitionGroup-->
<transition-group>
<li v-for="(item,i) in list" :key="item.id" @click="del(i)"> <!--如果要为v-for循环创建的元素设置动画,必须为每一个元素设置:key属性-->
{{item.id}} ---{{item.name}}
</li>
</transition-group>
</ul>
</div>
<script>
var vm=new Vue({
el:'#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})
},
del(i){
this.list.splice(i,1)
}
}
});
</script>
</body>
</html>
</html>