vue项目的transition动画

最新推荐文章于 2025-07-07 09:42:02 发布

原创最新推荐文章于 2025-07-07 09:42:02 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #transition

前端vue 专栏收录该内容

57 篇文章

订阅专栏

本文介绍如何使用Vue.js中的transition组件实现页面动画效果，具体为页面加载时从右侧滑入，页面关闭时从左侧滑出。通过CSS动画和Vue的生命周期钩子函数，可以轻松创建流畅的用户体验。

添加小程序，兑换各种视频教程/数据资源。

1. 实现页面动画进入时右滑，离开时左滑。

<template>
	<transition name="slide">
		<div class="singer_detail">
		
		</div>
	</transition>	
</template>
<style>
.singer_detail{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #222;
	z-index: 100;
}
.slide-enter-active{  //动画执行的时间
	transition: all 0.3s;
}
.slide-enter,.slide-leave-to{  //进入和离开时的动画
	transform: translate3d(100%,0,0);
}
</style>