如何延迟列表项（li）阴影的淡入效果？

我来帮你搞定这个问题！你之前尝试用JS加延迟类没成功，大概率是没等列表滑动动画结束就触发了阴影效果，或者延迟逻辑没处理对。下面是完整的实现方案：

1. 调整CSS样式，实现过渡动画 #

首先我们用CSS的transition来分别实现列表的滑动和li的阴影淡入效果，这样比纯JS控制更流畅：

/* 列表容器样式，初始在上方隐藏 */
.list-group {
  position: absolute;
  top: -380px;
  /* 滑动动画：top属性变化时0.5秒过渡 */
  transition: top 0.5s ease;
  padding: 0;
  margin: 0;
  list-style: none;
  background: #fff;
  width: 200px;
}

/* li元素默认无阴影，准备过渡效果 */
.list-group-item {
  padding: 12px;
  margin: 4px 8px;
  /* 默认阴影完全透明 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0);
  /* 阴影过渡动画：0.3秒平滑变化 */
  transition: box-shadow 0.3s ease;
}

/* 滑动到位后的列表类 */
.list-group.slide-in {
  top: 0;
}

/* 激活阴影的类 */
.list-group-item.shadow-active {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

2. 修改JavaScript逻辑，监听动画结束事件 #

我们需要等列表的滑动动画完全结束后，再给每个li添加阴影效果，甚至可以让li的阴影逐个淡入，增强视觉层次感：

function ani() {
  const list = document.getElementById('list');
  // 触发列表滑动动画
  list.classList.add('slide-in');

  // 监听滑动动画结束事件
  list.addEventListener('transitionend', function handleSlideEnd(event) {
    // 确保只处理top属性的过渡结束（避免其他过渡干扰）
    if (event.propertyName !== 'top') return;
    
    // 移除事件监听，防止重复触发
    list.removeEventListener('transitionend', handleSlideEnd);

    // 获取所有li元素，逐个延迟添加阴影
    const items = list.querySelectorAll('.list-group-item');
    items.forEach((item, index) => {
      // 每个li间隔100ms出现阴影，形成递进效果
      setTimeout(() => {
        item.classList.add('shadow-active');
      }, index * 100);
    });
  });
}

3. 调整HTML（可选） #

把内联样式移到CSS里会更规范，保留你原来的结构也完全可以：

<div>
  <ul class='list-group' id='list'>
    <h1 id='linkHeader'>Links</h1>
    <li class='list-group-item'><a href="#">LINK</a></li>
    <li class='list-group-item'><a href="#">LINK</a></li>
    <li class='list-group-item'><a href="#">LINK</a></li>
    <li class='list-group-item'><a href="#">LINK</a></li>
  </ul>
</div>
<button id='openLinkListButton' onclick='ani()'>click me</button>

为什么这个方案能行？ #

• 用CSStransition实现平滑的滑动和阴影过渡，性能比纯JS动画更好。
• 通过监听transitionend事件，确保阴影效果只在列表完全滑到位后才开始，完美匹配你的需求。
• 给每个li添加延迟，让阴影逐个出现，视觉效果更自然。

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