animate.css：css 动画库 https://animate.style/

    引入样式文件

    1. import 'animate.css';

    添加属性

    1. const animateProps = {
    2.     "animate-name": "fadeInUp",    // 这个名字不重要。当有多种动画时会排上用场
    3.     "animate-duration": '0.5',    // 动画持续时长
    4.   }
    7. 如果是循环节点，可借助函数动态添加动态持续时长
    8. const getDuration = (index: number) => {
    9.     return 1 + parseFloat('0.' + ((index + 1) * 2 - 1))
    10.   }
    2. <div
    3.  className={styles.title} 
    4.  {...animateProps}>
    5.     {formatMessage({ id: "Index_REALTIMEPOOLSTATS" })}
    6. </div>

    判断html是否进入视野

    1. // 判断元素是否在可视范围内
    2. export function elementInViewport(element) {
    3.   const rect = element.getBoundingClientRect();
    4.   return (
    5.     (rect.top >= 0 || rect.bottom >= 0) &&
    6.     (rect.left >= 0 || rect.right >= 0) &&
    7.     rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    8.   );
    9. }

    动态添加样式
    1.react

    1. useEffect(() => {
    2.     const handleAnimateListen = () => {
    3.       const animateEls = document.querySelectorAll('[animate-name]') as NodeListOf<HTMLElement>;
    5.       for (const el of animateEls) {
    6.         if (elementIntoViewport(el)) {
    7.           let animateDelay = el.getAttribute('animate-duration')
    8.           console.log('animateDelay: ', animateDelay);
    10.           if (!el.classList.contains('animate__animated')) {
    11.             el.classList.add('animate__animated', 'animate__fadeInUp'); // 添加动画类名
    12.             el.style.setProperty('--animate-duration', `${animateDelay}s`); // 动画时长
    13.           }
    14.         }
    15.       }
    16.     }
    18.     const animateEls = document.querySelectorAll('[animate-name]')
    20.     if (animateEls && animateEls.length > 0) {
    21.       handleAnimateListen();
    22.       document.addEventListener("scroll", handleAnimateListen, false);
    23.     }
    24.     return () => document.removeEventListener("scroll", handleAnimateListen, false);
    25.   }, [])

    2.vue

    1. const handleAnimateListen = () => {
    2.   const animateEls = document.querySelectorAll('[data-animate]')
    4.   for (const el of animateEls) {
    5.     if (elementInViewport(el)) {
    6.       let animateDelay = el.getAttribute('data-delay')
    8.       if (!el.classList.contains('animate__animated')) {
    9.         el.classList.add('animate__animated', 'animate__fadeInUp')
    10.         el.style.setProperty('--animate-duration', `${animateDelay}s`);
    11.       }
    12.     }
    13.   }
    14. }
    16. onMounted(() => {
    17.   setTimeout(() => {
    18.     const animateEls = document.querySelectorAll('[data-animate]')
    20.     if (animateEls && animateEls.length > 0) {
    21.       handleAnimateListen();
    22.       document.addEventListener("scroll", handleAnimateListen, false);
    23.     }
    24.   }, 0)
    25. });
    27. onUnmounted(() => {
    28.       document.removeEventListener('scroll', handleAnimateListen, false)
    29.     });