animation完成一个动画效果

代码基本结构搭建

使用与过渡动画相同的代码结构

<div id="root">
	<transition name='fade'>
		<div v-show='show'>hello world</div>
	</transition>
	<button @click="handleClick">change</button>
	</div>

<script type="text/javascript">
	var vm = new Vue({
		el:'#root',
		data:{
			show:true
		},
		methods:{
			handleClick:function(){
				this.show = ! this.show 
			}
		}
	})
</script>

添加CSS动画效果

我们想要完成一个动态效果，使得页面的div显示与消失时，在一定的时间内文字的大小不一样的一个动画

@keyframes关键帧

使用@keyframes关键帧来表示不同时期的样式规则

语法：

@keyframes 动画名称{
    百分比{
        样式规则；
    }
}

给上述代码中添加@keyframes动画效果

@keyframes bounce-in{
	0%{
		transform: scale(0);
	}
	50%{
		transform: scale(1.5);
	}
	100%{
		transform: scale(1);
	}
}

我们添加了一个名叫bounce-in的动画效果，在不同的时间段展示的盒子大小比例不同

设置动画加载时的CSS样式

有了过渡动画的基础，我们可以知道fade-enter-active和fade-leave-active在动画加载的全程都会存在，所以我们对这两个类进行样式设置

.fade-enter-active{
	transform-origin: left center;
	animation: bounce-in 1s;
}
.fade-leave-active{
	transform-origin: left center;
	animation: bounce-in 1s reverse;
}

我们通过animation来调用前面编写的bounce-in动画，令他持续的时间为1s。在盒子消失时，使用reverse对动画效果进行翻转，使得显示和消失效果对称

注意： transform-origin这个属性设置盒子变换的基准点，针对不同的效果需要设置不同的基准点

自定义类名

当使用transitiion标签时，vue会产生默认的类名，但我们也可以进行自定义

语法：我们在transition标签上添加对应的更改类名的属性

<transition name='fade' enter-active-class="active" leave-active-class="leave">

再对CSS样式中的类名进行修改即可

添加动画后完整代码

<style type="text/css">
@keyframes bounce-in{
	0%{
		transform: scale(0);
	}
	50%{
		transform: scale(1.5);
	}
	100%{
		transform: scale(1);
	}
}
.active{
	transform-origin: left center;
	animation: bounce-in 1s;
}
.leave{
	transform-origin: left center;
	animation: bounce-in 1s reverse;
}
</style>

<div id="root">
	<transition name='fade' enter-active-class="active" leave-active-class="leave">
		<div v-show='show'>hello world</div>
	</transition>
	<button @click="handleClick">change</button>
</div>

<script type="text/javascript">
	var vm = new Vue({
		el:'#root',
		data:{
			show:true
		},
		methods:{
			handleClick:function(){
				this.show = ! this.show 
			}
		}
	})
</script>

animate.css库

animate.css库为我们提供了动画效果的封装，我们在代码中引入这个css库，即可简单的完成所需的动画效果，而不用自己编写动画部分的代码

引用

在<head>标签内引用css库，href内填写animate.css库的存储位置

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

使用

在使用animate.css库的时候首先需要对class名进行重新自定义，自定义的名称为animated+空格+对应的效果名

<transition name='fade' enter-active-class="animated swing" leave-active-class="animated shake">
	<div v-show='show'>hello world</div>
</transition>

在使用时必须使用自定义类名的方式
animate.css库中的动画效果名称可以去官网查看
使用该库后可以省略CSS样式部分的代码

使用animate.css库完整代码

<div id="root">
	<transition name='fade' enter-active-class="animated swing" leave-active-class="animated shake">
		<div v-show='show'>hello world</div>
	</transition>
	<button @click="handleClick">change</button>
</div>

<script type="text/javascript">
	var vm = new Vue({
		el:'#root',
		data:{
			show:true
		},
		methods:{
			handleClick:function(){
				this.show = ! this.show 
			}
		}
	})
</script>

Vue---CSS动画之animate.css库