Vue中的列表过渡

最新推荐文章于 2023-05-06 08:49:36 发布

VVVGG

最新推荐文章于 2023-05-06 08:49:36 发布

阅读量380

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/VVVZCS/article/details/82422259

版权

Vue 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

先实现一个点击按钮，然后在列表中添加并显示内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="animate.css">
	<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="velocity.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		.v-enter, .v-leave-to{
			opacity: 0;
		}
		.v-enter-active, .v-leave-active{
			transition: opacity 1s;
		}
	</style>
</head>
<body>
	<div id="vm">
		<div v-for="(item, index) of list" :key="item.id">{{item.title}}</div>
		<button type="button" @click="handleClick">Add</button>
	</div>
	<script>
		var count = 0;
		var vm = new Vue({
			el: '#vm',
			data: {
				list: []
			},
			methods: {
				handleClick: function() {
					this.list.push({
						id: count++,
						title: 'Hello ReSword'
					});
				}
			}
		});
	</script>
</body>
</html>

现在要实现一个点击列表中某一项，实现列表过渡的效果

实际上和我们做单个元素过渡的效果基本一致

在列表外加一个transition-group

然后再CSS表中填写和元素过渡一样的样式

运行，点击Add发现就有渐现效果出来了

原理是这样的，当你在外部加了transiton-group标签之后，其实里面就会解析成这样

转换成了对单个元素的过渡动画

VVVGG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的列表过渡

先实现一个点击按钮，然后在列表中添加并显示内容&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Hello World&lt;/title&gt; &lt;script src="vue.js&q
复制链接

扫一扫