如何避免页面加载时菜单指示器出现多余的动画过渡效果？

问题核心原因 #

页面加载时浏览器会先渲染指示器的默认初始位置，再应用.is-active类对应的偏移规则，你默认给指示器绑定了transition属性，因此这个初始的位置变更过程就会触发过渡动画，出现不必要的位移。

你之前尝试将transition移到激活、hover状态下的方案不可行，是因为过渡仅会在你进入这两类状态时生效，退出状态（比如hover移出、切换激活项）时没有过渡，交互体验会断裂。

解决方案 #

方案1：JS控制初始过渡禁用（最稳妥，兼容性好） #

1. 给导航根元素加一个初始类no-transition，示例：

<ul class="Nav no-transition">
  <!-- 菜单项内容 -->
</ul>

2. 新增SCSS规则，初始状态下禁用指示器过渡：

.Nav.no-transition {
  .Nav-item:last-child:before,
  .Nav-item:last-child:after {
    transition: none !important;
  }
}

3. 加入极简JS逻辑，等DOM渲染完成、指示器初始位置渲染完毕后，移除禁用过渡的类，恢复正常交互的过渡效果：

document.addEventListener('DOMContentLoaded', () => {
  const nav = document.querySelector('.Nav')
  // 强制触发浏览器重绘，确保初始位置先生效再恢复过渡
  void nav.offsetWidth
  nav.classList.remove('no-transition')
})

方案2：纯CSS调整（无需JS，适合固定菜单场景） #

如果你的菜单项数量、单个宽度都是固定值，可以直接给指示器的初始left属性设为和默认激活项完全匹配的数值，页面加载时初始位置就是正确的，不会触发位移过渡。

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