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) => {
// });
});
},