多组件动画效果

最新推荐文章于 2022-04-13 14:00:00 发布

qwer12321ck76

最新推荐文章于 2022-04-13 14:00:00 发布

阅读量127

点赞数

分类专栏： vue

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

版权

vue 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多组件动画效果</title>
	<script src='./vue.js'></script>
	<style>
		.fade-enter {
			opacity: 0;
		}
		.fade-enter-active {
			transition: opacity 1s;
		}
		.fade-leave-to {
			opacity: 0;
		}
		.fade-leave-active {
			transition: opacity 1s;
		}
	</style>
</head>
<body>
	<div id="app">
		<!--key值可以表面复用导致的动画效果不显示 mode设置多个元素的隐藏显示顺序-->
		<transition name="fade" mode="out-in">
			<!-- <div v-if="show" key="hello">hello world</div> -->
			<!-- <div v-else key="bye">bye world</div> -->
			<component :is="type"></component>
		</transition>
		<button @click="handleClick">切换</button>
	</div>
	<script>
		Vue.component('child', {
			template: '<div>child</div>'
		})
		Vue.component('child-one', {
			template: '<div>child-one</div>'
		})
		var app = new Vue({
			el: '#app',
			data: {
				show: true,
				type: 'child'
			},
			methods: {
				handleClick: function() {
					this.show = !this.show
					this.type = this.type === 'child' ? 'child-one' : 'child'
				}
			}
		})
	</script>
</body>
</html>