IntersectionObserver场景下淡入动画提前触发问题求助

我正在为网站添加动画效果，平移效果能通过IntersectionObserver在滚动到对应区域时正常触发，但新增的fadeIn淡入动画会在页面加载时直接执行，导致用户滚动到目标区域时看不到该动画效果。相关代码如下：

.vision-box-animation{
  /* Animation Settings */
  transform: translateY(+100px);
  animation: fadeIn ease 2s;
}

@keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

.up{
  transform: translateY(0);
  transition: transform ease 1s;
}

let timer = 0;
window.addEventListener('load', (event) => {
    let intersectionObserver = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setTimeout(function() { entry.target.classList.add('up'); }, timer);
            timer += 50;
            intersectionObserver.unobserve(entry.target);
          }
        });
    });

    document.querySelectorAll('.vision-box-animation').forEach(obj => {
      intersectionObserver.observe(obj);
    });
  });

错误原因 #

你当前的核心问题是**.vision-box-animation类直接绑定了fadeIn动画**，页面加载时只要元素存在，这个动画就会立即执行，完全脱离了IntersectionObserver的滚动触发逻辑。

修改步骤 #

1. 重构CSS，分离初始状态与触发状态
   将元素的初始隐藏状态和触发后的动画效果拆分，只在触发时启用动画：

.vision-box-animation {
  /* 初始状态：透明+下移，不执行动画 */
  opacity: 0;
  transform: translateY(100px);
  /* 保留平移过渡效果 */
  transition: transform ease 1s;
}

/* 触发动画的类：同时启用淡入动画和平移到位 */
.vision-box-animation.animate-in {
  opacity: 1;
  transform: translateY(0);
  animation: fadeIn ease 2s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

2. 调整JS逻辑，替换触发类
   把原来添加up类的逻辑改成添加新的animate-in类，同时可以删除无用的up类：

let timer = 0;
window.addEventListener('load', (event) => {
    const intersectionObserver = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setTimeout(() => {
              entry.target.classList.add('animate-in');
            }, timer);
            timer += 50;
            intersectionObserver.unobserve(entry.target);
          }
        });
    });

    document.querySelectorAll('.vision-box-animation').forEach(obj => {
      intersectionObserver.observe(obj);
    });
});

效果说明 #

修改后，元素初始处于透明且下移的状态，只有当IntersectionObserver检测到元素进入视口时，才会添加animate-in类，同时触发淡入动画和平移过渡，完美实现滚动触发的预期效果。如果需要调整动画时序，可以修改animation或transition的时长参数。

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