【Vue】列表动画

最新推荐文章于 2022-03-19 21:47:29 发布

KkaBum

最新推荐文章于 2022-03-19 21:47:29 发布

阅读量149

点赞数

本文链接：https://blog.csdn.net/KkaBum/article/details/101372342

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<style type="text/css">
		li {
			border: 1px dashed #000;
			margin: 5px;
			line-height: 35px;
		}
		li:hover{
			background-color:hotpink;
			transition: all 0.8s ease;
			width: 100%
		}
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform: translateY(150px)
		}
		.v-enter-active,
		.v-leave-active{
			transition: all 0.8s ease;
		}
		/*v-move 和 v-leave-active搭配使用能够实现列表中元素慢慢飘的效果*/
		.v-move{
			transition: all 0.8s 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" name="" value="添加" v-on:click = "add">
		</div>
		<!-- <ul> -->
			<!-- 在实现列表过度的时候，如果需要过度的元素是通过v-for循环渲染出来的，
			不能用transition包裹，要用transition-group包裹 -->
			<transition-group appear tag="ul"> <!-- appear给li添加入场效果 因为transition-group默认是在ul下面添加一个span，span包裹块计元素不好，所以用tag="ul"指定transition-group渲染为ul-->
				<li v-for="(item,i) in list" v-bind:key = "item.id" v-on:click="del(i)">{{item.id}}------{{item.name}}</li>
			</transition-group>
		<!-- </ul> -->
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				id:"",
				name:"",
				list:[
					{id:1,name:"haha"},
					{id:2,name:"aaaa"},
					{id:3,name:"bbbb"},
					{id:4,name:"cccc"},
				]	
			},
			methods:{
				add:function(){
					this.list.push({id:this.id,name:this.name})
					this.id = this.name =""
				},
				del:function(i){
					this.list.splice(i,1)
				}
			}
		})
	</script>
</body>
</html>

KkaBum

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】列表动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></...
复制链接

扫一扫