vue中的动画

---

1、使用过渡类名

HTML结构：

<div id="app">
	<input type="button" value="动起来" @click="myAnimate">
	<!-- 使用transition将需要过渡的元素包裹起来 -->
	<transition name="fade">
		<div v-show="isshow">动画哦</div>
	</transition>
</div>

VM实例：

//创建Vue实例，得到ViewModel
var vm = new Vue({
	el:'#app',
	data:{
		isshow:false,
	},
	methods:{
		myAnimate(){
			this.isshow=!this.isshow;
		}
	}
})

CSS样式：

/*定义进入和离开时候的过渡状态*/
.fade-enter-active,
.fade-leave-active{
	transition: all 0.2s ease;
	position: absolute;
}

/*定义进入过渡的开始状态和离开过渡的结束状态*/
.fade-enter,
.fade-leave-to{
	opacity:0;
	transform:translateX(100px);
}

2、使用第三方css动画库

导入动画类库：

<link rel="stylesheet" type="text/css" href="./lib/animate.css">

定义transition及属性：

<transition enter-active-class="fadeInRight" leave-active-class="fadeOutRight" :duration="{ enter:500,leave:800 }">
	<div class="animated" v-show="isshow">动画哦</div>
</transition>

3、使用动画钩子函数

定义transition组件以及三个钩子函数：

<div id="app">
	<input type="button" value="切换动画" @click="isshow=!isshow">
	<!-- 使用transition将需要过渡的元素包裹起来 -->
	<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
		<div v-if="isshow" class="show">OK</div>
	</transition>
</div>

定义三个methods钩子方法：

//创建Vue实例，得到ViewModel
var vm = new Vue({
	el:'#app',
	data:{
		isshow:false,
	},
	methods:{
		beforeEnter(el){//动画进入之前的回调
			el.style.transform='translateX(500px);
		},
		enter(el,done){//动画进入完成时候的回调
			el.offsetWidth;
			el.style.transform='translateX(0px);
			done();
		},
		afterEnter(el){//动画进入完成之后的回调
			this.isshow=!this.isshow;
		}
	}
})

定义动画过渡时长和样式：

.show{
	transition: all 0.4s ease;
}

4、v-for的列表过渡

定义过渡样式：

.list-enter,
.list-leave-to{
	opactiy:0;
	transform:translateY(10px);
}

.list-enter-active,
.list-leave-active{
	transition:all 0.3s ease;
}

定义DOM结构，其中，需要使用transition-group组件把v-for循环的列表包裹起来：

<div id="app">
	<input type="text" v-model="txt" @keyup.enter="add">
	<transition-group tag="ul" name="list">
		<li v-for="(item,i) in list" :key="i">{{item}}<li>
	<transition-group>
</div>

定义VM中的结构：

//创建Vue实例，得到ViewModel
var vm = new Vue({
	el:'#app',
	data:{
		txt:'',
		list:[1,2,3,4]
	},
	methods:{
		add(){
			this.list.push(this.txt);
			this.txt='';
		}
	}
})

5、列表的排序过渡

组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的v-model特性，它会在元素的改变定位的过程中应用。
v-model和v-leave-active结合使用，能够让列表的过渡更加平缓柔和：

.v-move{
	transition:all 0.8s ease;
}
.v-leave-active{
	position:absolute;
}

---

总结

以上就是今天要讲的内容。