如何实现div内元素依次逐个显示？解决行内span滚动触发动画同步显示的问题

我明白你遇到的困扰了——当span元素横向排列在同一行时，它们的垂直偏移量几乎完全相同，原代码会在同一时刻给所有span加上b-fadein类，导致它们同步显示，而不是按预期逐个依次出现。

问题根源 #

原JavaScript逻辑是检查每个span元素的垂直位置是否进入视口触发区，而同一行的span的offset().top值几乎一致，所以触发条件会同时满足，所有span会被一次性添加动画类。虽然你在CSS中设置了animation-delay依赖--i变量，但由于类是同时添加的，浏览器会同时启动所有动画（只是延迟执行），视觉上很容易看起来像是同步显示。

解决方案：基于父容器触发，逐个添加动画类 #

我们可以调整逻辑：先判断父容器content-wrapper是否进入视口，当满足条件后，再按顺序延迟给每个子span添加动画类，这样就能确保它们逐个依次显示，完全不受排列方式影响。

修改后的JavaScript代码

$(window).scroll(function() {
  $('.content-wrapper').each(function(){
    const $wrapper = $(this);
    const wrapperPos = $wrapper.offset().top;
    const topOfWindow = $(window).scrollTop();
    
    // 仅当父容器进入视口且未触发过动画时执行
    if (wrapperPos < topOfWindow + 400 && !$wrapper.hasClass('animated')) {
      $wrapper.addClass('animated'); // 标记已触发，避免滚动时重复执行
      
      // 遍历子span，按索引设置延迟添加动画类
      $wrapper.find('.el').each(function(index) {
        setTimeout(() => {
          $(this).addClass("b-fadein");
        }, index * 500); // 每个元素延迟500ms，和动画时长对应
      });
    }
  });
});

调整后的CSS代码

/* 初始状态隐藏所有子span */
.content-wrapper .el {
  opacity: 0;
}

/* 淡入动画类 */
.b-fadein {
  animation: fadeIn 0.5s linear forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

简化后的HTML结构

不需要手动设置内联CSS变量和初始opacity了，后续添加元素直接新增span即可：

<div class="content-wrapper">
  <span class="el el1">1</span>
  <span class="el el2">2</span>
  <span class="el el3">3</span>
  <!-- 后续新增span无需额外配置 -->
</div>

方案优势 #

1. 不受布局影响：不管子元素是横向还是纵向排列，只要父容器进入视口，就会触发逐个动画
2. 易于维护：新增span元素时，无需手动维护--i变量，JS会自动根据索引设置延迟
3. 避免重复触发：通过给父容器添加animated类标记，确保动画只会执行一次

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