在Ionic5中使用Animate.css，高效使用css3动画库

Animate.css 一款强大的预设css3动画库,现在如何把它应用到Ionic5中呢。
https://github.com/daneden/animate.css

1， 在package.json 中添加：

  "animate.css": "^3.7.2",

2， 在global.scss中添加引用:

>   @import '~animate.css/animate.min.css';

3， 使用ViewChild引用页面元素

`` import {  ViewChild, ElementRef } from '@angular/core';
  @ViewChild('test', {static: false, read: ElementRef})fab: ElementRef;

4，对页面添加添加class

animateCSS(animationName, keepAnimated = false) {
const node = this.fab.nativeElement;
node.classList.add(‘animated’, animationName)

function handleAnimationEnd() {
  if (!keepAnimated) {
    node.classList.remove('animated', animationName);
  }
  node.removeEventListener('animationend', handleAnimationEnd)
}
node.addEventListener('animationend', handleAnimationEnd)

}

this.animateCSS(‘bounceOutDown’);