[JavaScript知识库]React+ animate 添加动画

import React, { useState, useEffect, Fragment } from 'react'
import styles from './style.less'
import 'animate.css';
// 视频
const dataS = [
    { id: 1 },
    { id: 2 },
    { id: 3 },
]
// 圆点
const currentPageIndex = [
    { id: 1 },
    { id: 2 },
    { id: 3 },
]
const Index = () =>
{
    const [SwitchingCircles, setSwitchingCircles] = useState(1)

    useEffect(() =>
    {  // 发送数据请求 设置订阅/启动定时器 手动更改 DOM 等 ~
        document.documentElement.style.setProperty('--animate-duration', '1s');  // 使动画持续时间为 3 s
        return () =>
        {  // 组件卸载之前 做一些收尾工作 比如清楚定时器/取消订阅 等 ~
        }
    }, [])  // 检测数组内变量 如果为空 则监控全局
    // 添加动画类并自动删除它们
    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 circleClick = (data) =>
    {
        const { id } = data
        if (id > SwitchingCircles)
        {
            animateCSS('.AddAnimation', 'fadeInRight')
        } else
        {
            animateCSS('.AddAnimation', 'fadeInLeftBig')
        }

        setSwitchingCircles(id)
    }


    return (
        <div style={{ display: 'flex', justifyContent: 'center' }} className={styles.overall} className='AddAnimation' >
            <div style={{ width: '1000px', height: '237px' }}>
                {SwitchingCircles === 1 ? (
                    <div>
                        {dataS.map((data, index) => (
                            <div key={index} className={styles.core}>
                                <div className={styles.video}>312</div>
                            </div>
                        ))}
                    </div>
                ) : null}

                {SwitchingCircles === 2 ? (
                    <div>
                        {dataS.map((data, index) => (
                            <div key={index} className={styles.core}>
                                <div className={styles.video}>12222</div>
                            </div>
                        ))}
                    </div>
                ) : null}
                {SwitchingCircles === 3 ? (
                    <div>
                        {dataS.map((data, index) => (
                            <div key={index} className={styles.core}>
                                <div className={styles.video}>33333</div>
                            </div>
                        ))}
                    </div>
                ) : null}
                <div className={styles.round}>
                    {currentPageIndex.map((data, index) => (
                        <h1 key={index} onClick={() => circleClick(data)} style={data.id === SwitchingCircles ? { background: 'rgba(42, 164, 252, 1)' } : null} className={styles.SmallCircle}></h1>
                    ))}
                </div>
            </div>
        </div>

    )
}

export default Index

.overall {
  width: 1000px;
  height: 237px;
  box-sizing: border-box;
  // background-color: pink;
  padding: 24px 0 0 30px;
  background-color: pink;
  
}


.core {
  position: relative;
  display: inline-block;
  padding: 13px;
  width: 304px;
  height: 171px;
  border: 1px solid #4776BC;
  margin-right: 14px;

  .video {
    height: 100%;
    background-color: pink;
  }

  .video::before {
    position: absolute;
    top: -1px;
    left: -1px;
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid #1DA2FF;
    border-right: 5px solid transparent;
    border-bottom: 10px solid transparent;
    //   border-top: 5px solid #1DA2FF;
  }

  .video::after {
    position: absolute;
    right: -1px;
    bottom: -1px;
    content: "";
    border-bottom: 10px solid #1DA2FF;
    border-left: 10px solid transparent;
  }



}

.round {
  display: flex;
  justify-content: center;

  .SmallCircle {
    cursor: pointer;
    margin: 18px;
    width: 14px;
    height: 14px;
    background: #0B3858;
    border-radius: 50%;
  }
}