<!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">
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.min.js"></script>
<link href="./lib/animate.css" rel="stylesheet" type="text/css">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
<label>id</label>
<input type="text" v-model="id">
<label>名称</label>
<input type="text" v-model="name">
<button @click="add">添加</button>
<!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
<!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
<!-- 给 ransition-group 添加 appear 属性,实现页面刚展示出来时候,入场时候的效果 -->
<!-- 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,
渲染为 span 标签 -->
<transition-group appear tag="p" enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 500, leave: 200 }">
<p v-for="i,index in list" :key="i.id">
{{i.name}}
<button @click="del(i.id)">删除</button>
</p>
</transition-group>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'',
list:[
{id:1,name:'tom'},
{id:2,name:'jerry'}
]
},
methods: {
add(){
this.list.push({id:this.id,name:this.name})
},
del(id){
var index='';
for(var i=0;i<this.list.length;i++){
if(this.list[i].id==id){
index=i;
break;
}
}
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
Vue列表动画(transition-group)
最新推荐文章于 2024-09-05 08:51:26 发布