vue+animate.css 手动挂载dom结构实现连续动画效果

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图所示：