vue笔记之动画03-列表动画

最新推荐文章于 2023-05-16 10:50:01 发布

qq_36781179

最新推荐文章于 2023-05-16 10:50:01 发布

阅读量104

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_36781179/article/details/82876229

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
  	<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
  	<link rel="stylesheet" href="animate.min.css">
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<style type="text/css">
		li{
			border:1px dashed #999;
			margin:5px;
			line-height:35px;
			padding-left:5px;
			width:100%;
		}
		li:hover{
			background:hotpink;
			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;

		}
		/*.v-move和.v-leave-active配合使用，能够实现列表后续的元素渐渐飘上来*/
		.v-move{
			transition: all 0.6s ease;
		}
		.v-leave-active{
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="app">
		<div>
			<label>
				id:
				<input type="text" name="" v-model="id">
			</label>
			<label>
				name:
				<input type="text" name="" v-model="name">
			</label>
			<input type="button" value="添加" @click="add">
		</div>
		<!-- <ul> -->
			<!-- 在实现列表过度的时候，如果需要过渡的元素是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup -->
			<!-- 如果要为v-for循环创建的元素设置动画，必须为每一个元素设置:key属性 -->
			<!-- transition-group添加appear实现入场的时候动画 -->
			<!-- 通过为transition-group元素，设置tag属性，指定transition-group渲染为指定的元素，默认是span标签 -->
			<transition-group appear tag="ul">
				<li v-for="item in list" :key="item.id" @click="del(i)"> 
					{{item.id}}----{{item.name}}
				</li>
			</transition-group>
			
		<!-- </ul> -->
		
	</div>
	<script>
		
		var vm = new Vue ({
			el:'#app',
			data:{
				id:"",
				i:'',
				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="";
				},
				del (i) {
					this.list.splice(i,1)
				}
			}

		});
		
	</script>
</body>
</html>