vue使用animate.css做连续、延迟动画笔记

1、安装

cnpm i animate.css --save

2、使用

1、新建utils/animateCSS.js

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });
  export default animateCSS;

2、使用

import animateCSS from "@/utils/animateCSS";
 showGoodBox(){
       animateCSS('.good_box', 'zoomIn').then((message) => {
       
        this.showGood=false
        // animateCSS('.good_box', 'fadeOut').then((message) => {
            
        // });
      });
    },