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

最新推荐文章于 2021-12-30 22:06:16 发布

VVVGG

最新推荐文章于 2021-12-30 22:06:16 发布

阅读量440

点赞数

分类专栏： Vue

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

版权

Vue 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

我们先在一个transition组件中，放入两个组件

这样子页面上Hello World和Bye World是否有效果呢？

结果是没有的，因为在使用了v-if和v-else的时候，Vue会尽量的复用dom节点，这就导致了没有动画效果出来

那么，我们怎么样才能够让Vue不复用dom呢？

加一个key值就好

就会有渐变效果了

其实transiton标签中给了我们一个mode的参数，用于切换多个元素的过渡效果

in-out的意思是要显示的元素先进来，然后再隐藏要隐藏的元素

out-in的意思是要隐藏的元素先隐藏，然后要显示的元素再进来

--------------------------------------------------------------------------------------

多个组件的过渡

<!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">
		<transition mode="in-out">
			<child v-if="show" >child</child>
			<child-one v-else >chile-one</child-one>
		</transition>
		<button @click="handleClick" type="button">change</button>
	</div>
	<script>
		Vue.component('child', {
			template: '<div>child</div>'
		});
		Vue.component('child-one', {
			template: '<div>child-one</div>'
		});
		var vm = new Vue({
			el: '#vm',
			data: {
				show: true
			},
			methods: {
				handleClick: function() {
					this.show = !this.show;
				}
			}
		});
	</script>
</body>
</html>

这样就可以切换多个组件

那么现在我们想使用动态组件做到渐变效果

<!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">
		<transition mode="out-in">
			<component :is="type"></component>
		</transition>
		<button @click="handleClick" type="button">change</button>
	</div>
	<script>
		Vue.component('child', {
			template: '<div>child</div>'
		});
		Vue.component('child-one', {
			template: '<div>child-one</div>'
		});
		var vm = new Vue({
			el: '#vm',
			data: {
				type: 'child'
			},
			methods: {
				handleClick: function() {
					this.type = this.type === 'child' ? 'child-one' : 'child';
				}
			}
		});
	</script>
</body>
</html>

VVVGG

关注

0
点赞
踩
1

收藏

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

我们先在一个transition组件中，放入两个组件这样子页面上Hello World和Bye World是否有效果呢？结果是没有的，因为在使用了v-if和v-else的时候，Vue会尽量的复用dom节点，这就导致了没有动画效果出来那么，我们怎么样才能够让Vue不复用dom呢？加一个key值就好就会有渐变效果了其实transiton标签中给了我们一个mode的参...
复制链接

扫一扫

专栏目录