1、animate.css是一款前端動畫庫，有豐富的動畫效果，官網中相應的效果例子：https://daneden.github.io/animate.css/

2、我們可以通過以下方式進行安裝：

npm install animate.css --save-dev

3、vue檔案的script中引入：

import animate from 'animate.css'

4、我們可以將animate.css的動畫效果運用在過渡上面，例如：

<transition enter-active-class="zoomIn" leave-active-class="zoomOut">
    <div 
 
v-show="animateShow" class="animated" >{{messageText}}</div>
</transition>

5、以上的方式存在一個問題，當動畫連續出現時，會出現動畫效果不連貫，我們可以通過手動掛載dom元素進行連續動畫效果。我們可以定義一個vue元件如下：

<template>
  <transition enter-active-class="zoomIn" leave-active-class="zoomOut">
      <div v-show="animateShow" class="animated" 
 
>{{messageText}}</div>
  </transition>
</template>
<style>
    .animated{
        font-size: 80px;
        color: #00d6b2;
        position: absolute;
        margin-left: 350px;
    }
</style>
<script type="text/babel">
  export default {
    data() {
      return {
         duration
 
: 3000,
         startTime:10,
         animateShow:false,
         messageText:''
};
    },
    methods: {
      close() {
        this.animateShow = false;
        setTimeout(() => {
          this.$el.parentNode.removeChild(this.$el);
        }, 2000);
      },

      startTimer() {
        if(this.startTime > 0){
          setTimeout(() => {
              this.animateShow = true;
          }, this.startTime);
        }
        if (this.duration > 0) {
          setTimeout(() => {
              this.close();
          }, this.duration);
        }
      }
    },

    mounted() {
      this.startTimer();
    }
  };
</script>

6、手動進行dom元素的掛載，相關程式碼如下：

import Vue from 'vue';
let aniMateConstructor = Vue.extend(require('./main.vue'));

let instance;
let instances = [];
let zIndex = 1000;

var Animation = function(options) {
  instance = new aniMateConstructor({
    data: options
  });
  instance.vm = instance.$mount();
  document.body.appendChild(instance.vm.$el);
  instance.vm.visible = true;
  instance.dom = instance.vm.$el;
  instance.dom.style.zIndex = zIndex++;
  instances.push(instance);
  return instance.vm;
};

export default Animation;

7、當需要該動畫效果時，只需要手動掛載一次該dom結構，如下所示：

animationExample({
    animateShow: false,
    messageText:'你真棒!'
});

8、動畫效果如以下gif圖所示：