给列表每一项都增加过渡动画

最新推荐文章于 2022-11-29 21:02:05 发布

qwer12321ck76

最新推荐文章于 2022-11-29 21:02:05 发布

阅读量492

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/u012497072/article/details/106526856

版权

vue 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src='./vue.js'></script>
	<style>
		.v-enter, .v-leave-to {
			opacity: 0;
		}
		.v-enter-active, .v-leave-active {
			transition: opacity 1s;
		}
	</style>
</head>
<body>
	<div id="app">
		<!--给列表每一项都增加过渡动画-->
		<!-- <transition-group> -->
			<div v-for="item of list" :key="item.id">
				{{item.title}}
			</div>
		</transition-group>
		<button @click="handleBtnClick">Add</button>
	</div>
	<script>
		var count = 0;
		var app = new Vue({
			el: '#app',
			data: {
				list: []
			},
			methods: {
				handleBtnClick: function() {
					this.list.push({
						id: count++,
						title: 'hello world'
					})
				}
			}
		})
	</script> 
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qwer12321ck76

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
给列表每一项都增加过渡动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title> <script src='./vue.js'></script> <style> .v-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-
复制链接

扫一扫