移动端导航链接动画异常：主动画结束后显示导航链接的实现

问题根源 #

桌面端依靠.nav-main的3D变换遮挡效果，让导航链接看起来在主动画结束后才显示，但移动端视口下遮挡失效，导致导航链接直接出现。核心问题是导航链接的动画没有设置与主动画（main-animation，时长0.5s）匹配的延迟。

修复步骤 #

1. 调整导航链接容器的显示逻辑

给.nav-links添加初始隐藏状态，并设置延迟显示的过渡，确保主动画结束后才显示容器：

.nav-links {
  position: absolute;
  width: 30%;
  right: 0;
  top: 0;
  height: 90vh;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 新增以下代码 */
  opacity: 0;
  transition: opacity 0s ease;
  transition-delay: 0.5s; /* 与main-animation时长一致 */
}

.nav-container.active .nav-links {
  opacity: 1;
  transition-delay: 0.5s; /* 等待主动画结束后显示 */
}

2. 给导航链接的出现动画添加基础延迟

调整.nav-links a的动画延迟，让所有链接在主动画结束后再依次出现：

.nav-container.active .nav-links a {
  /* 将原var(--i)改为calc(0.5s + var(--i))，添加0.5s基础延迟 */
  animation: appear 1.5s forwards ease calc(0.5s + var(--i));
}

3. 移除无效动画

删除.nav-container.active .nav-main中未定义的nav-links-animation动画：

.nav-container.active .nav-main {
  /* 移除nav-links-animation，保留main-animation即可 */
  animation: main-animation 0.5s ease;
  cursor: pointer;
  transform: perspective(1200px) rotateY(20deg) translateZ(310px) scale(0.5);
}

修改后效果 #

点击汉堡菜单后，.nav-main先完成0.5s的主动画，之后.nav-links容器显示，同时导航链接按设置的延迟依次淡入，移动端和桌面端行为保持一致。

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