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

最新推荐文章于 2022-09-08 15:42:27 发布

A cold winter

最新推荐文章于 2022-09-08 15:42:27 发布

阅读量114

点赞数

分类专栏： Vue.js基础

本文链接：https://blog.csdn.net/qq_41611820/article/details/103368606

版权

Vue.js基础专栏收录该内容

20 篇文章 1 订阅

订阅专栏

Vue中多个元素的过渡与单个元素的过渡类似：
多个元素的过渡：

<style>
			.v-enter,.v-leave-to{
				opacity: 0;
			}
			.v-enter-active,.v-leave-active{
				transition: opacity 1s;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<!--mode="out-in"表示要隐藏的元素先隐藏，显示的元素在显示-->
			<transition mode="out-in">
			<!--Vue为了优化，有dom复用的概念,绑定一个key值避免dom复用-->	
			<div v-if="show" key="hello">Hello World</div>
			<div v-else key="bye">bye world</div>
			</transition>
			<button @click="handleClick">toggle</button>
		</div>
		<script>
			var vm = new Vue({
				el:'#root',
				data:{
					show:true
				},
				methods:{
					handleClick:function(){
						this.show=!this.show
					}
				}
			})
		</script>
	</body>

多个组件的过渡，可以使用动态组件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue中多个元素或组件的过渡</title>
		<script type="text/javascript" src="js/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">
			<!--mode="out-in"表示要隐藏的元素先隐藏，显示的元素在显示-->
			<transition mode="out-in">
			 <component :is="type"></component>
			</transition>
			<button @click="handleClick">toggle</button>
		</div>
		<script>
			
			Vue.component('child-one',{
				template:'<div>child-one</div>'
			})
			
			Vue.component('child-two',{
				template:'<div>child-two</div>'
			})
			
			var vm = new Vue({
				el:'#root',
				data:{
					type:"child-one"
				},
				methods:{
					handleClick:function(){
						this.type = (this.type==='child-one'?'child-two':'child-one')
					}
				}
			})
		</script>
	</body>
</html>

A cold winter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中多个元素或组件的过渡

Vue中多个元素的过渡与单个元素的过渡类似：多个元素的过渡：<style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style> </head> <bo...
复制链接

扫一扫

专栏目录