yarn add animate.css
官网地址
import React, { useEffect } from 'react'
import 'animate.css';
const index = () =>
{
useEffect(() =>
{
document.documentElement.style.setProperty('--animate-duration', '1s');
}, [])
const animateCSS = (element, animation, prefix = 'animate__') =>
new Promise((resolve, reject) =>
{
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
function handleAnimationEnd (event)
{
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, { once: true });
});
const AnimationDisappears = () =>
{
const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutDown');
element.addEventListener('animationend', () =>
{
console.log('动画消失了');
});
}
const AddAnimation = () =>
{
animateCSS('.my-element', 'bounce');
animateCSS('.AddAnimation', 'rotateOut').then((message) =>
{
console.log(message);
});
}
const ModifyDuration = () =>
{
const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '5s');
}
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }} >
<button className="animate__animated animate__bounce my-element animationend" onClick={AnimationDisappears}>动画消失</button>
<button className="AddAnimation" onClick={AddAnimation}>添加动画并删除</button>
<button onClick={ModifyDuration}>修改动画持续时间</button>
</div >
)
}
export default index