动画animate的使用

yarn add animate.css

官网地址

import React, { useEffect } from 'react'
import 'animate.css';
const index = () =>
{

    useEffect(() =>
    {
        document.documentElement.style.setProperty('--animate-duration', '1s');  // 使动画持续时间为 3 s
    }, [])
    // 添加动画类并自动删除它们
    const animateCSS = (element, animation, prefix = 'animate__') =>
        // 我们创建一个 Promise 并返回它
        new Promise((resolve, reject) =>
        {
            const animationName = `${prefix}${animation}`;
            const node = document.querySelector(element);

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

            // 当动画结束时，我们清理类并解析 Promise
            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', () =>  // 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