Vue中的列表过渡

最新推荐文章于 2022-10-25 17:09:35 发布

华天下之大软

最新推荐文章于 2022-10-25 17:09:35 发布

阅读量408

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37117521/article/details/109733169

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

以下是vue动画从入门到跑路目录

Vue中的js动画与Velocity.js的结合

Vue中多个元素或组件的过渡

Vue中的列表过渡

Vue中的动画封装

实现点击按钮的时候，添加的列表项过渡显示。

原理：使用transition-group之后，相当于transition-group里包裹的标签都在外头套一层transition，此处则相当于是在每个div外头都套了一层transition

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Vue中的列表过渡</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="root">
		<transition-group>
			<div v-for="item of list" :key="item.id">{{item.title}}</div>
		</transition-group>
		<button @click="handleClick">Add</button>
	</div>
	<script >
		var vm = new Vue({
			el:'#root',
			data:{
				list: []
			},
			methods:{
				handleClick:function() {
					this.list.push({
                        id: count++,
                        title: 'hello world'
                    })
				}
			}
        })
 
    </script>
</body>
 
</html>

华天下之大软

关注

0
点赞
踩
0

收藏

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

实现点击按钮的时候，添加的列表项过渡显示。原理：使用transition-group之后，相当于transition-group里包裹的标签都在外头套一层transition，此处则相当于是在每个div外头都套了一层transition<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue中的列表过渡</title> <script src=.
复制链接

扫一扫