移动端点击图标展开菜单时，如何为CSS和HTML添加过渡效果？

首先，display: none 和 display: block 之间无法直接添加过渡动画，得用max-height、opacity这类支持过渡的属性来实现平滑展开效果。以下是完整实现方案：

1. 移动端基础样式（默认折叠状态） #

先设置移动端菜单默认折叠的样式，给菜单容器加初始的max-height: 0、opacity: 0，同时添加过渡属性：

/* 移动端基础样式（默认折叠） */
nav {
  display: flex;
  flex-direction: column;
  /* 可根据需求添加背景、内边距等基础样式 */
}

.logo {
  padding: 10px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0; /* 初始高度为0，隐藏菜单 */
  opacity: 0;
  overflow: hidden; /* 超出部分隐藏，避免内容溢出 */
  transition: max-height 0.3s ease, opacity 0.3s ease; /* 定义过渡动画的时长和曲线 */
  flex-direction: column;
}

ul li {
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
}

span.nav-toggle {
  display: block;
  /* 菜单图标定位样式，示例放在右上角 */
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
}

2. 用JS触发展开/折叠状态 #

通过点击按钮给菜单容器添加/移除active类，触发过渡效果：

const navToggle = document.querySelector('.nav-toggle');
const navMenu = document.querySelector('nav ul');

navToggle.addEventListener('click', () => {
  navMenu.classList.toggle('active');
});

3. 展开状态的CSS样式 #

给active类设置展开后的样式，让菜单平滑显示：

ul.active {
  max-height: 500px; /* 设置一个足够容纳菜单内容的高度值 */
  opacity: 1;
}

4. 保留你原有的桌面端样式 #

你提供的桌面端样式可以直接保留，确保屏幕宽度≥800px时菜单正常横向显示：

@media screen and (min-width: 800px) {
    nav {
      height: 80px;
      flex-direction: row;
    }
  .logo {
      padding-left: 50px;
      margin: 0;
      width: 20%;
    }
  ul {
      display: flex;
      justify-content: flex-end;
      width: 80%;
      flex-direction: row;
      max-height: none; /* 桌面端取消max-height限制 */
      opacity: 1;
    }
  ul li {
      display: inline-block;
      margin: 0 70px 0 0;
      text-align: left;
      border-bottom-style: none;
      padding: 0;
    }
  span.nav-toggle {
      display: none;
    }
  }

关键注意点 #

• 用max-height而非height是因为菜单高度可能随内容变化，max-height能适配不同长度的菜单，只要值足够大就行。
• 过渡属性必须同时定义在初始状态和目标状态上，动画才能生效。
• 确保移动端菜单默认处于折叠状态，只有点击按钮时才触发展开。

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