如何设置过渡时序，让响应式导航关闭完成后再触发字体大小变化

问题原因 #

你现在的代码触发关闭操作时，会同时触发两个动画：

• 导航菜单的max-height收起动画，配置的时长是1s
• 导航链接的font-size变化动画，配置的时长是0.25s
  两个动画同时启动，短时长的字号变化会先完成，就出现了你看到的文字先变小、菜单再收起的问题。

方案1：纯CSS修改（最简便） #

只需要给收起状态下的导航链接加动画延迟，让字号变化等菜单收起动画完成后再执行即可，修改对应CSS规则：

.collapsed .top-bar__nav-list a {
  font-size: 2vw;
  /* 加这行，延迟1s执行字号变化，刚好匹配你菜单1s的收起动画时长 */
  transition: font-size 0.25s 1s;
}

如果你想打开菜单的时候字号立刻变大，不需要延迟，保持原来的.top-bar__nav-list a的transition配置就可以，延迟只会在添加collapsed类（也就是关闭菜单）的时候生效。

方案2：JS控制时序（更灵活，适合后续动效调整） #

修改关闭菜单的逻辑，等菜单收起动画完成后再执行后续的类修改和状态恢复，同时顺便修正你原JS里变量作用域、语法错误的问题：

// 先把公共DOM节点提到外层，避免作用域报错
const navToggle = document.querySelector("#top-nav-toggle");
const topNav = document.querySelector("#top-bar__nav");
// 菜单动画时长，和CSS里配置的1s保持一致
const NAV_TRANSITION_DURATION = 1000;

function openCloseNav() {
  if (!navToggle.classList.contains("closed")) {
    // 打开菜单逻辑不变
    navToggle.classList.add("closed");
    topNav.classList.remove("collapsed");
    document.querySelector("html").addEventListener("click", watchNavClose);
    document.body.style.overflowY = 'hidden';
  } else {
    // 先触发菜单收起动画
    topNav.classList.add("collapsed");
    document.documentElement.removeEventListener("click", watchNavClose);
    // 等动画完成后再执行剩余操作
    setTimeout(() => {
      document.body.style.overflowY = "scroll";
      navToggle.classList.remove("closed");
    }, NAV_TRANSITION_DURATION)
  }
}

document.addEventListener('keydown', e => {
  if ( e.keyCode === 27 && navToggle.classList.contains("closed")) {
    // 按ESC关闭的逻辑同步修改
    topNav.classList.add("collapsed");
    document.documentElement.removeEventListener("click", watchNavClose);
    setTimeout(() => {
      document.body.style.overflowY = "scroll";
      navToggle.classList.remove("closed");
    }, NAV_TRANSITION_DURATION)
  }
})

navToggle.addEventListener("click", openCloseNav);

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