CSS animation导致登录popup modal无法正常弹出问题求助

问题根因 #

你设置的全局.login默认样式opacity: 0会同时命中两类元素：

• 移动端导航栏内需要做入场动画的Login按钮
• 点击按钮后要弹出的登录弹窗本身
  这就导致即便JS触发了弹窗的显示逻辑，弹窗也会被该CSS规则强制设为透明，视觉上表现为弹窗无法弹出。
  除此之外，仅通过opacity和transform隐藏的元素默认仍占据页面层级、可响应点击事件，也可能出现透明元素遮挡下方可点击区域的问题。

修复方案 #

缩小CSS选择器的作用范围，仅对移动端导航内的Login按钮生效，同时补充交互状态控制，修改后的代码如下：

.mobilenavigation .login {
  opacity: 0;
  transform: scale(1.15) translateY(-30px);
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99),
    opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0.21s;
  /* 隐藏状态下关闭交互，避免遮挡其他元素点击 */
  pointer-events: none;
}
.mobilenavigation.menu-opened .login {
  opacity: 1;
  transform: scale(1) translateY(0px);
  transition-delay: 0.55s;
  /* 显示状态开启交互 */
  pointer-events: auto;
}

你可以直接替换原有的259-272行代码，即可同时保留按钮动画、保证登录弹窗正常弹出。

兼容方案 #

如果修改后仍存在弹窗被样式影响的问题，可以补充一条高优先级规则强制弹窗样式正常，将下方代码的.modal-container替换为你实际的弹窗父容器类名即可：

.modal-container .login {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

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