animate.css

安装

通过 npm

npm install animate.css --save

通过 yarn

yarn add animate.css

导入

import 'animate.css';

或者直接引入 css 文件

Copy
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

基本用法

Copy
An animated element

结合 js 实现点击触发动画

Copy





<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
Document



An animated element




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

document.getElementById("animated").addEventListener("click", () => {
animateCSS("#animated", "bounce");
});

