移动端添加左右切换过渡效果

最新推荐文章于 2024-09-11 15:33:18 发布

大胖run

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量95

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_63586786/article/details/129839369

版权

<template>
	<div id="app">
		<transition :name="transitionName">
			<router-view class="transitionBody" v-if="!$route.meta.keepAlive"></router-view>
		</transition>
	</div>
</template>

<script>

	export default {
		name: 'App',
		data() {
			return {
				transitionName: 'transitionLeft',
			}
		},
		watch: {
			'$route'(to, from) {
				const arr = []		
				arr.push(to.path)
				this.transitionName = arr.indexOf(to.path) > arr.indexOf(from.path) ? 'transitionLeft' : 'transitionRight'
			}
		},
	}
</script>

<style>
.transitionBody {
		transition: all 0.4s ease-out;
	}

	.transitionLeft-enter,
	.transitionRight-leave-active {
		-webkit-transform: translate(100%, 0);
		transform: translate(100%, 0);
	}

	.transitionLeft-leave-active,
	.transitionRight-enter {
		-webkit-transform: translate(-100%, 0);
		transform: translate(-100%, 0);
	}

	.transitionLeft-enter-active,
	.transitionRight-enter-active {
		//防止过渡时元素抖动
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}

</style>