前期准备

我们先写一个transition过渡，然后做亿点点修改：

CSS部分：

.fade-enter{opacity: 0;} /*初始透明度为0  消失->显示*/
.fade-enter-active{ transition: opacity 2s; }
.fade-leave-to{opacity: 0;} /*结果透明度为0  显示->消失*/
.fade-leave-active{ transition: opacity 1s; }

HTML部分：

<div id="root">
		<transition name="fade">
		<div v-if="show">hello vue.js</div>
		</transition>
		<button @click="handleclick">switch</button>
	</div>

JS部分：

var vm =new Vue({
    el:'#root',
    data:{
        show:true
    },
    methods:{
        handleclick:function(){
            this.show=(this.show === true?false:true)/*或者 this.show = !this.show*/
        }
    }
})

如果没有基础的朋友或者看不太明白可以阅读一下这篇文章：juejin.cn/post/684490…

然后我们对css部分进行修改：

使用animate.css做个动画

我们做一个在消失和出现过程中，弹性变大变小的动画。

keyframes创建动画

语法：

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

我们用起来：

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

使用@keyframes创建一个名叫“bounce-in”的动画，“keyframes”的翻译是“关键帧”，是CSS3的一种规则，学过PR的朋友应该能明白，通过特殊位置设定的点来控制整个过程。

所以我们分别在整个动画进行到0%，50%，100%的时刻设计动画：transform: scale(1.5)，意为在动画进行到这一时刻，尺寸为1.5倍，其他同理。

调用animate

在这两个钩子函数：.fade-enter-active,.fade-leave-active中，添加animate属性，并使用之前给动画取的名字将其连接，并且因为这两个函数从头到尾存在，所以这个动画也能按关键帧从头至尾呈现。

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

这里animate语句的用法：bounce-in是动画名，1s是持续时间，这里的reverse是指在消失动画中倒放（或者理解为关键帧倒置）

优化动画

我们现在打开浏览器看到的是这样：

即变大变小出现在浏览器左边边框外面了，这时我们做些调整：

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

这里transform-origin控制动画的基点位置为左上角。动画过程中的变大变小就以左边为基点变化。

animate.css库

先学会自定义class名

除了使用<transition>中的name来设定钩子函数，还<transition>中添加leave-active-class="leave"，跟在css中添加.fade-leave-active一个效果。

同理还可以对另一个动画进行自定义名处理。

下载并引用animate.css库

官网下载并在代码<head>中： <link rel="stylesheet" type="text/css" href="animate.css">,这里href写入下载的animate.css库的保存路径。

使用animate.css库

可以将css部分全部删去，然后在enter-cative-class和leave-active-class中使用 “animated 动画名” 的语法直接使用库中丰富的动画效果。

这里仅贴入<transition>标签内的内容:

<transition name="fade"
    enter-active-class="animated swing" 
    leave-active-class="animated shake"
>
<div v-if="show">hello vue.js</div>
</transition>

即可实现飘荡进入和抖动消失动画。

上述操作的完整代码

<html>
<head>
	<meta charset="utf-8">
	<title>vue使用animate.css库</title>
	<script type="text/javascript" src="./Vue.js"></script>
	<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
	<div id="root">
		<transition name="fade"
			enter-active-class="animated swing" 
			leave-active-class="animated shake">
		<div v-if="show">hello vue.js</div>
		</transition>
		<button @click="handleclick">switch</button>
	</div>

	<script type="text/javascript">
		var vm =new Vue({
			el:'#root',
			data:{
				show:true
			},
			methods:{
				handleclick:function(){
					this.show=(this.show === true?false:true)/*或者 this.show = !this.show*/
				}
			}
		})
	</script>
</body>
</html>

Vue动画之使用animate.css库