如何在滚动到对应区块/元素进入视口时触发CSS动画效果

实现方案 #

你只需要调整部分CSS规则，再增加一段JS代码即可实现需求，具体修改如下： #

1. 调整CSS代码

取消默认状态下直接触发动画的逻辑，将动画绑定到新增的.animate类上：
把原来.line:after规则里的animation: animate 1 4s;删除，调整后的.line:after规则为：

.line:after {
  content: "";
  background: #333;
  height: 25px;
  transition: 0.8s; /* 原代码中0,8s为书写错误，已修正为小数点 */
  display: block;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

然后新增一条CSS规则：

.line.animate:after {
  animation: animate 4s forwards 1;
}

2. 新增JS代码

使用浏览器原生的IntersectionObserver接口监听元素是否进入可视区域，进入后自动添加动画类触发效果：

// 选中所有进度条元素
const lines = document.querySelectorAll('.line');
// 创建监听实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      entry.target.classList.add('animate');
      // 已触发动画的元素取消监听，避免重复触发
      observer.unobserve(entry.target);
    }
  })
}, {
  threshold: 0.1 // 元素露出10%时触发动画，可根据需求调整数值
});
// 给所有进度条绑定监听
lines.forEach(line => observer.observe(line));

补充说明

• HTML代码无需修改，保持原有结构即可
• 如果你希望整个wrapper区块进入可视区再统一触发所有进度条动画，只需要把JS选择器换成.wrapper，添加类名的逻辑修改为给wrapper元素添加animate类，对应CSS规则改成`.wrapper.animate .line:after即可
• IntersectionObserver的触发阈值可自行调整，0代表元素刚露出就触发，1代表完全露出才触发

内容的提问来源于stack exchange，提问作者Ezekiel Angelo Castulo