📝 列表交错动画

步骤 1：HTML 结构

创建列表结构，每个列表项包含图标、内容和序号：

<ul class="staggered-list">
  <li class="list-item">
    <div class="list-item-icon">🎯</div>
    <div class="list-item-content">
      <h3 class="list-item-title">标题</h3>
      <p class="list-item-desc">描述</p>
    </div>
    <div class="list-item-number">1</div>
  </li>
  <!-- 更多列表项... -->
</ul>

步骤 2：设置初始状态

列表项初始状态为隐藏（透明且向下偏移）：

.list-item {
  /* 初始状态：隐藏 */
  opacity: 0;
  transform: translateY(20px);

  /* 过渡效果 */
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

步骤 3：定义显示状态

添加 .show 类使列表项显示：

.list-item.show {
  opacity: 1;
  transform: translateY(0);
}

步骤 4：使用 JavaScript 添加递增延迟

通过 JavaScript 为每个列表项设置递增的 transition-delay：

// 获取所有列表项
const items = document.querySelectorAll('.list-item');

// 播放动画
function playAnimation() {
  items.forEach((item, index) => {
    // 为每个项设置递增的延迟（100ms 间隔）
    const delay = index * 100;
    item.style.transitionDelay = `${delay}ms`;

    // 添加 show 类触发动画
    setTimeout(() => {
      item.classList.add('show');
    }, 50);
  });
}

// 重置动画
function resetAnimation() {
  items.forEach(item => {
    item.classList.remove('show');
    item.style.transitionDelay = '0ms';
  });
}

步骤 5：延迟值示例

每个列表项的延迟值递增，创建交错效果：