一、CSS3.0方式实现动画
案例：使用css3.0动画实现文字出现、消失时的动画
<template>
<div id="slot">
<transition>
<div v-if="show">
<h1>你好！</h1>
</div>
</transition>
<button @click="showText">显示/隐藏</button>
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
},
methods: {
showText() {
this.show = !this.show;
}
}
};
</script>
<style>
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.v-enter-active {
transform-origin: left center;
animation: bounce-in 1s;
}
.v-leave-active {
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
v-enter-active 和 v-leave-active 就是DOM元素外围加上 <transition> 标签后，消失出现时的回调类。当然，我们可以自定义回调类的名字，如下方：
<template>
<div id="slot">
<transition enter-active-class="active" leave-active-class="leave">
。。。。
</div>
</template>
<script>
。。。。
</script>
<style>
。。。。
.active {
transform-origin: left center;
animation: bounce-in 1s;
}
.leave {
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
二、animate.css 方式实现动画
在明确了如何触发文字消失、出现时的动画时，我们就可以使用开源动画库，来帮助我们实现动画，如下：
1.下载 animate.css，放入项目中
去官网 https://daneden.github.io/animate.css/ 下载
2.在Main.js中引入该css文件
import './assets/animate.css'
3.使用动画
<transition enter-active-class="animated swing" leave-active-class="animated shake">
。。。
</transition>
这里设置了文字出现和隐藏时的动画，但是在页面刷新或者第一次载入时，是没有动画的，为了在页面刷新或者第一次载入时出现动画，可以改造上述代码如下，关键就是 appear 和 appear-active-class ：
<transition
appear
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated swing">
。。。
</transition>
