JavaScript动画无法逐个展示菜单项的问题求助

你的问题核心是所有定时器的延迟时间完全一致——循环会瞬间执行完毕，所有setTimeout会在差不多700ms后同时触发，导致所有元素同步显示。要实现依次逐个展示，需要给每个菜单项的触发延迟加上递增的偏移量。

修正后的代码 #

for (let i = 1; i < 10; i++) {
  // 每个元素的延迟时间按索引递增，实现依次触发
  setTimeout(function() {
    const menuItem = document.getElementById('sm-menu-' + i);
    menuItem.classList.remove('d-none');
    // 先取消隐藏再添加动画类，保证动画能正常触发
    setTimeout(function() {
      menuItem.classList.add('fadeinfrombottom');
    }, 100);
  }, 700 * i); // 关键：用索引乘以基础延迟，让每个元素的触发时间依次延后
}

关键改动说明 #

• 将外层setTimeout的固定700ms延迟改为700 * i，这样第1个元素在700ms后触发，第2个在1400ms，第3个在2100ms……以此类推，实现逐个依次展示。
• 缓存了menuItem元素，避免重复调用getElementById，提升代码性能。
• 调整操作顺序：先移除d-none取消隐藏，再添加动画类，确保元素从隐藏状态切换到显示时，能正确触发动画效果（100ms的小延迟适配部分浏览器的渲染机制）。

额外注意事项 #

确保你的CSS动画类fadeinfrombottom定义正确，示例如下：

.fadeinfrombottom {
  animation: fadeInFromBottom 0.5s ease forwards;
}

@keyframes fadeInFromBottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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