【vue】动画的相关使用

最新推荐文章于 2019-04-08 07:44:48 发布

铃科百合子丶

最新推荐文章于 2019-04-08 07:44:48 发布

阅读量108

点赞数

分类专栏： vue2.x

本文链接：https://blog.csdn.net/qq_18372191/article/details/84326025

版权

vue2.x 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue2.x中可以使用<transition></transition>标签来进行动画的相关操作

<transition name=' ' >要运动的元素</transition>

<transition></transition>有以下6个属性

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
--------------------参考菜鸟教程----------------------------

以下是一个使用的小栗子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js"></script>
		<style>
			#div1{
				margin-top: 100px;
				width: 100px;
				height: 100px;
				background: orange;
			
				left: 50%;
			}
			 .fade-enter{
			
				background: yellow;
				opacity: 1;
				
			 }
			 .fade-enter-active{
				width: 100px;
				height: 100px;
				opacity: 1;
				background:yellow;
				left: 50%;
				transition: 1s ease all; 
			}
			 .fade-leave{
				width: 100px;
				height: 100px;
				opacity: 1;
				background: #F4A460;
				left: 50%;
				transition:1s ease all; 
			 }
			 .fade-leave-active{
				 opacity: 0;
				 width: 0;
				 height: 0;
				 transition:1s ease all;
			 }
			 .fade-enter{
			 	width: 50px;
			 	height: 50px;
			 	background: yellow;
			 	opacity: 0;
			 	left: 30%;
			 }
			
			
		</style>
	</head>
	<body>
		<div id="app">
		<button type="button" @click="changed">改变</button>
		<transition name='fade' >
		<div id="div1" v-show="show"></div>
		</transition>
		</div>
	
		
		<script>
		new Vue({
			el:'#app',
			data:{
				show:false,
			},
			methods:{
				changed(){
					this.show=!this.show
				}	
			}
		})
		</script>
	</body>
</html>

我们还可以通过使用来实现更加丰富的动画效果

官方网站：https://daneden.github.io/animate.css/

如果要给多个元素使用动画效果的话可以使用<transition-group name=' ' >要运动的元素1 要动的元素2</transition-group>

每个元素要绑定一个不同key 例如 :key='1' :key='2'

具体使用如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
	<script src="../vue.js"></script>
	<link rel="stylesheet" type="text/css" href="../animate.css"/>
	<style type="text/css">
		#div1{
			position: absolute;
			left: 50%;
			margin-top: 20px;
			width: 100px;
			height: 100px;
			background: #F4A460;
		}
		#div2{
			margin-top: 200px;
			width: 100px;
			height: 100px;
			background: #F4A460;
		}
	</style>
</head>
<body>
	<div id="app">
		<button type="button" @click="changed">点击</button>
		<transition-group name='fade' 
		enter-active-class='flip animated'
		leave-active-class='hinge animated'>
			<div id="div1" v-show="show" :key='1'></div>
			<div id="div2" v-show="show" :key='2'></div>
			
		</transition-group>
				
	</div>
	
<script>
	new Vue({
		el:'#app',
		data:{
			show:false
		},
		methods:{
			changed(){
				this.show=!this.show
			}
		}
	})
</script>
</body>
</html>

更多动画请参考官方模板