vue基础之过渡效果

最新推荐文章于 2023-09-09 15:52:39 发布

原创最新推荐文章于 2023-09-09 15:52:39 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue过渡 #vue动画

Vue 专栏收录该内容

15 篇文章

订阅专栏

在vue官方api中，有提到Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。详见vue过渡基础

提到过渡，就不得不说动画。二者的区别主要有两点：

过渡只有一组关键帧(开始、结束),动画可设置多组关键帧
过渡需要事件触发，动画不需要事件触发

在 CSS 过渡和动画中自动应用 class

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>
</head>
<body>
	<div id="out">
		
		<button @click="isshow=!isshow">控制动画</button>
		
		<transition name="bounce">
			<p v-show="isshow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas repudiandae totam sint iure explicabo perspiciatis quod corrupti rerum delectus blanditiis inventore nulla unde tempore molestias laudantium consequuntur minima cumque.</p>
		</transition>
		
	</div>
</body>
<script type="text/javascript">
	
	var vm=new Vue({
		el:'#out',
		data:{
			isshow:true
		}
	})	
</script>
</html>

配合使用第三方 CSS 动画库，如 Animate.css，地址见swiper动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/css/animate.css"/>
	</head>
	<body>
		<div id="out">
			<button @click="isshow=!isshow">控制动画</button>
                      <!--自定义动画类名enter-class   enter-active-class     leave-class   leave-active-class-->
			<transition  enter-active-class="animated swing" swiper-animate-effect="fadeInUp"  leave-active-class="animated bounceOut">
				<p v-if="isshow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum veritatis ad ipsam voluptates at neque assumenda voluptatibus tenetur enim ullam totam id sequi vero fuga voluptate nesciunt impedit deleniti tempora?</p>
			</transition>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#out",
			data:{
				isshow:true
			}
		})
	</script>
</html>

注：1.当有多个元素需要过渡时，需要用到transition-group。然后当有相同标签名的元素需要切换时，通过key属性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/animate.css"/>
</head>
<body>
	<div id="out">
		
		<button @click="isshow=!isshow">控制动画</button>
		
		<transition-group
				enter-active-class="animated rotateInDownLeft"
                swiper-animate-effect="fadeInUp" 
				leave-active-class="animated zoomOutLeft"
			>
			<p v-if="isshow" key="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas repudiandae totam sint iure explicabo perspiciatis quod corrupti rerum delectus blanditiis inventore nulla unde tempore molestias laudantium consequuntur minima cumque.</p>
			<p v-show="isshow" key="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas repudiandae totam sint iure explicabo perspiciatis quod corrupti rerum delectus blanditiis inventore nulla unde tempore molestias laudantium consequuntur minima cumque.</p>
		</transition-group>
		
	</div>
</body>
<script type="text/javascript">
	
	var vm=new Vue({
		el:'#out',
		data:{
			isshow:true
		}
	})
</script>
</html>

2.过渡相关的函数

@before-enter="beforeEnter"

@enter="enter"

@after-enter="afterEnter"

@before-leave="beforeLeave"

@leave="leave"

@after-leave=“afterLeave”

函数可通过e.style来设置样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/animate.css"/>
</head>
<body>
	<div id="out">
		
		<button @click="isshow=!isshow">控制动画</button>
		
		<transition
				enter-active-class="animated rotateInDownLeft"
				leave-active-class="animated zoomOutLeft"
				
				@before-enter="beforeEnter"
				@enter="enter"
				@after-enter="afterEnter"
				
				@before-leave="beforeLeave"
				@leave="leave"
				@after-leave="afterLeave"
				
			>
			<p v-show="isshow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas repudiandae totam sint iure explicabo perspiciatis quod corrupti rerum delectus blanditiis inventore nulla unde tempore molestias laudantium consequuntur minima cumque.</p>

		</transition>
		
	</div>
</body>
<script type="text/javascript">
	
	var vm=new Vue({
		el:'#out',
		data:{
			isshow:true
		},
		methods:{
			beforeEnter(){
				console.log('进入之前')
			},
			enter(){
				console.log('进入...')
				
			},
			afterEnter(e){
				e.style.color='blue'
				console.log('进入之hou')
				
			},
			beforeLeave(){
				console.log('离开之前')
				
			},
			leave(){
				console.log('离开。。。。')
				
			},
			afterLeave(){
				console.log('离开之hou...')
				
			}
		}
	})
	
</script>
</html>

多个组件进行过渡------动态注册组件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/animate.css"/>
</head>
<body>
	<div id="out">
		
		<button @click="tap()">AAAAA组件</button>
		<button @click="tap1()">BBBBB组件</button>
		
		<transition
				enter-active-class="animated rotateInDownLeft"
				leave-active-class="animated zoomOutLeft"
			>
			<component :is='view'></component>	

		</transition>
		
	</div>
	
	
	<template id="aa">
		<div>
			<h1>AAAA组件</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque labore nesciunt doloremque maiores sapiente placeat itaque totam cupiditate aspernatur ut ducimus culpa magni aperiam consectetur quam quaerat rem repellendus porro!</p>
		</div>
	</template>
	
	<template id="bb">
		<div>
			<h1>BBBB组件</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque labore nesciunt doloremque maiores sapiente placeat itaque totam cupiditate aspernatur ut ducimus culpa magni aperiam consectetur quam quaerat rem repellendus porro!</p>
		</div>
	</template>
	
	
</body>
<script type="text/javascript">
	
	var vm=new Vue({
		el:'#out',
		data:{
			view:'v-a'
		},
		components:{
			'v-a':{
				template:'#aa'
			},
			'v-b':{
				template:'#bb'
			}
		},
		methods:{
			tap(){
				this.view='v-a'
			},
			tap1(){
				this.view='v-b'
			}
		}
	})	
</script>
</html>

路由+动画 Transition标签包含 router-view标签即可

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../js/css/animate.css"/>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue-router.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	.router-link-active{
		color: orangered;
	}
</style>
</head>
<body>
	<div id="out">	
		<h1>路由</h1>
		<!--导航标签-->
		<router-link to="/home" tag="span">首页</router-link>
		<router-link to='/about' tag="span">关于</router-link>
		<router-link to="/other" tag="span">其他</router-link>
		<hr />
		<transition
			enter-active-class="animated  rollIn"
			leave-active-class="animated  rollOut"
			>
			<!--路由容器-->
			<router-view></router-view>
		</transition>
			 	
	</div>
	<!--组件模板-->
	<template id="home">
		<div>
			<h1>首页</h1>
		</div>
	</template>
	<template id="about">
		<div>
			<h1>关于</h1>
		</div>
	</template>
	<template id="other">
		<div>
			<h1>其他</h1>
		</div>
	</template>
</body>
<script type="text/javascript">
	//注册组件
	var Home={
		template:'#home'
	}
	var About={
		template:'#about',
	}
	var Other={
		template:'#other'
	}
    //路由规则定义
	var routes=[
		{path:'/home',component:Home},
		{path:'/about',component:About},
		{path:'/other',component:Other},
		{path:'*',redirect:'/home'}
	]
	//实例化路由对象
	var router=new VueRouter({
		routes:routes
	})
	//挂载路由
	var vm=new Vue({
		el:'#out',
		router:router
	})	
</script>
</html>