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 sreturn () =>{  // 组件卸载之前 做一些收尾工作 比如清楚定时器/取消订阅 等 ~}}, [])  // 检测数组内变量 如果为空 则监控全局// 添加动画类并自动删除它们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);// 当动画结束时，我们清理类并解析 Promisefunction handleAnimationEnd (event){event.stopPropagation();node.classList.remove(`${prefix}animated`, animationName);resolve('Animation ended');}node.addEventListener('animationend', handleAnimationEnd, { once: true });});const circleClick = (data) =>{const { id } = dataif (id > SwitchingCircles){animateCSS('.AddAnimation', 'fadeInRight')} else if (id < SwitchingCircles){animateCSS('.AddAnimation', 'fadeInLeftBig')} else{animateCSS('.AddAnimation', 'bounce')}setSwitchingCircles(id)}return (<div className={styles.container}><div style={{ display: 'flex', justifyContent: 'center' }} className={styles.overall} className='AddAnimation' >{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><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 >)
}export default Index

.container {width: 100%;height: 100%;position: relative;.overall {margin: 0 auto;position: relative;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%;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！