用AI封装js组件配合aniamate.css动画库实现列表平滑效果

/**
 * 初始化滚动动画效果。
 * 该函数会查找所有带有 'scroll-animate father' 类的父元素，
 * 根据其 data-* 属性为子元素应用动画效果和延迟。
 * 依赖 animate.css 或类似库提供动画效果的初始隐藏和最终状态管理。
 *
 * @param {string} [parentSelector='.scroll-animate.father'] - 父元素的 CSS 选择器。
 * @param {boolean} [observeOnce=true] - 如果为 true，动画只触发一次；如果为 false，每次进入视口都触发。
 * @param {string} [defaultEffect='fadeInDown'] - 默认的动画效果类名。
 * @param {number} [defaultDelayIncrement=0.05] - 默认的延迟递增值。
 * @param {string} [defaultChildSelector='a, li'] - 默认的子元素选择器。
 */
function initScrollAnimations(
  parentSelector = '.scroll-animate.father',
  observeOnce = true,
  defaultEffect = 'fadeInDown',
  defaultDelayIncrement = 0.05,
  defaultChildSelector = 'a, li'
) {
  const parents = document.querySelectorAll(parentSelector);

  if (parents.length === 0) {
      console.warn(`未找到任何父元素，请检查选择器：${parentSelector}`);
      return;
  }

  const observerOptions = {
      root: null, // 根元素为视口
      rootMargin: '0px',
      threshold: 0.1 // 元素 10% 进入视口时触发
  };

  parents.forEach(parent => {
      const childSelector = parent.dataset.child || defaultChildSelector;
      const delayIncrement = parseFloat(parent.dataset.delay || defaultDelayIncrement);
      const effectClass = parent.dataset.effect || defaultEffect;

      const children = parent.querySelectorAll(childSelector);
      if (children.length === 0) {
          console.warn(`未找到子元素，请检查 data-child 选择器（或默认值）：${childSelector}`, parent);
          return;
      }

      // 初始化子元素状态：确保它们没有动画类，并且没有行内延迟
      // 期望 animate.css 或外部 CSS 已经处理了初始的 opacity/visibility
      children.forEach(child => {
          child.classList.remove('animated', effectClass);
          child.style.animationDelay = '';
          // 如果 animate.css 已经处理了初始隐藏，这里无需额外设置
          // 但为保险起见，可以考虑在这里确保初始状态（如果 animate.css 没完全覆盖）
          // 例如：child.style.opacity = '0';
      });

      const observerCallback = (entries, observer) => {
          entries.forEach(entry => {
              if (entry.isIntersecting) {
                  let delay = 0;
                  children.forEach((child) => {
                      // 检查是否已经有 animated 和对应的动画类，避免重复触发
                      // 如果 observeOnce 为 false，每次进入都要重新触发，所以不检查
                      if (observeOnce && child.classList.contains('animated') && child.classList.contains(effectClass)) {
                          return; // 已经触发过动画，跳过
                      }

                      child.style.animationDelay = `${delay}s`;
                      child.classList.add('animated', effectClass); // 添加 animated 和动画效果类
                      
                      delay += delayIncrement;
                  });

                  if (observeOnce) {
                      observer.unobserve(entry.target); // 一旦动画触发，停止观察
                  }
              } else if (!observeOnce) {
                  // 如果不是 observeOnce，并且元素离开视口，移除动画类以便再次进入时触发
                  children.forEach(child => {
                      child.classList.remove('animated', effectClass);
                      child.style.animationDelay = ''; // 移除延迟
                  });
              }
          });
      };

      const observer = new IntersectionObserver(observerCallback, observerOptions);
      observer.observe(parent); // 观察父元素
  });
}