如何实现滚动时边框动画的延迟触发？

CSS的animation-delay属性计时起点为页面加载完成时刻，并非元素进入可视区域的时刻，因此页面下方的元素还未滚动到视野中时，动画已经完成了延迟计时并执行完毕，并非属性失效。

方案1：使用Divi原生滚动动画设置（适配性最高，无需额外代码） #

Divi本身已内置滚动触发动画能力，直接修改模块配置即可：

• 进入对应分隔线模块的「设计」标签页，定位到「动画」设置组
• 移除之前直接绑定在.border类上的全局动画样式
• 在Divi动画设置中选择你需要的动画效果，将触发条件设置为进入视口时触发
• 直接在面板中调整动画延迟、持续时间等参数即可

方案2：自定义JS+CSS实现（适合需要高度自定义动画效果的场景） #

先调整CSS规则，把动画触发逻辑和基础样式拆分：

/* 分隔线基础样式，默认不触发动画 */
.border {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
/* 元素进入视口后添加的激活类，仅此时触发动画 */
.border.animation-active {
  animation: 你之前定义的边框动画名称 0.8s ease forwards;
}

再添加监听元素进入视口的JS代码，将代码添加到Divi主题选项「集成」板块的页脚代码区域即可：

document.addEventListener('DOMContentLoaded', () => {
  // 监听所有带.border类的分隔线
  const borderList = document.querySelectorAll('.border');
  // 创建交叉观察器
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(item => {
      // 元素进入视口时添加激活类
      if (item.isIntersecting) {
        item.target.classList.add('animation-active');
        // 触发一次后取消监听，避免重复执行
        observer.unobserve(item.target);
      }
    })
  }, {
    threshold: 0.15 // 元素15%进入视口时触发，可按需调整数值
  })
  // 给所有分隔线绑定观察器
  borderList.forEach(el => observer.observe(el))
})

如果需要给不同分隔线设置不同的延迟，可给分隔线添加自定义属性data-delay（单位为毫秒），再修改JS逻辑即可：

// 进入视口的逻辑修改为
if (item.isIntersecting) {
  const delay = item.target.dataset.delay || 0;
  setTimeout(() => {
    item.target.classList.add('animation-active');
  }, delay)
  observer.unobserve(item.target);
}

内容的提问来源于stack exchange，提问作者Margo Harmon