三十二、在Vue中使用animate.css库

一、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 ：