如何在点击事件中实现元素淡入？移动端容器过渡后逐个淡入a元素

嘿，我正好做过类似的效果，给你梳理下实现思路和具体代码，保证能达到你想要的那种逐个淡入的效果！

要实现这个需求，关键要抓住两个节点：

• 先让mobile-container完成展开的过渡动画
• 动画结束后，给容器内的a元素依次添加淡入效果，通过延迟控制逐个出现的节奏

1. 基础HTML结构（对应你提供的Jade转译后） #

<nav>
  <a id="brand">ecostudent</a>
  <ul class="main-navigation">
    <li><a href="#">lorem</a></li>
    <li><a href="#">lorem</a></li>
    <li><a href="#">lorem</a></li>
    <li><a href="#">lorem</a></li>
  </ul>
  <div class="menu-wrapper">
    <!-- 移动端容器 -->
    <div class="mobile-container">
      <a href="#">菜单链接1</a>
      <a href="#">菜单链接2</a>
      <a href="#">菜单链接3</a>
      <a href="#">菜单链接4</a>
    </div>
    <!-- 触发按钮 -->
    <button class="menu-trigger">菜单</button>
  </div>
</nav>

2. CSS样式设置 #

先给容器加上过渡动画，同时让a元素初始处于隐藏状态：

/* 移动端容器初始收起状态 */
.mobile-container {
  height: 0;
  overflow: hidden;
  /* 容器展开的过渡动画，时长可自行调整 */
  transition: height 0.3s ease-in-out;
}

/* 容器展开后的状态 */
.mobile-container.expanded {
  height: 240px; /* 根据内容高度调整 */
}

/* 链接初始隐藏样式 */
.mobile-container a {
  display: block;
  margin: 10px 0;
  opacity: 0;
  /* 加个小位移，让淡入效果更自然 */
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 链接淡入后的样式 */
.mobile-container a.fade-in {
  opacity: 1;
  transform: translateY(0);
}

3. jQuery交互逻辑 #

监听按钮点击，等容器展开过渡结束后，逐个触发链接淡入：

$('.menu-trigger').on('click', function() {
  const $container = $('.mobile-container');
  $container.toggleClass('expanded');

  // 如果是展开操作，等待过渡结束后执行淡入
  if ($container.hasClass('expanded')) {
    // 用one而不是on，避免多次绑定事件
    $container.one('transitionend', function() {
      // 遍历所有a元素，按索引设置延迟
      $container.find('a').each(function(index) {
        $(this).delay(index * 150) // 每个链接延迟150ms，可调整节奏
          .queue(function(next) {
            $(this).addClass('fade-in');
            next();
          });
      });
    });
  } else {
    // 收起容器时，移除淡入类，确保下次展开能重新触发动画
    $container.find('a').removeClass('fade-in');
  }
});

• transitionend事件：确保我们是在容器完全展开后才开始淡入动画，而不是和展开动画同时进行
• delay(index * 150)：利用遍历的索引值给每个链接设置不同的延迟，实现逐个出现的效果，150ms可根据需求调整（值越小，淡入间隔越短）
• 收起时移除fade-in类：避免下次展开时链接已经是显示状态，动画失效

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