登录注册表单滑动异常：需实现Signup表单左侧滑入效果

AI 小北

2026-6-16

修复登录注册表单切换动画异常

问题根源

异常核心原因是：.form.active选择器中定义的slide-in动画（从右侧滑入）优先级高于JavaScript动态设置的signup-slide-in-from-left动画，导致从Login切换到Signup时，Signup表单被强制应用默认的右侧滑入动画，而非预期的左侧滑入。

修复步骤

1. 修改CSS，移除默认激活表单动画

找到CSS中.form.active的定义，删除其中的animation: slide-in 0.6s forwards;，仅保留显示控制：

/* Show the active form */
.form.active {
  display: flex;
  /* 移除该行默认动画：animation: slide-in 0.6s forwards; */
}

2. 保留原有JavaScript逻辑（无需修改）

原JS中的动画切换逻辑本身是正确的：

当Login表单激活时，点击Register会触发login-slide-out-to-left（Login左滑消失）和signup-slide-in-from-left（Signup左滑进入）
当Signup表单激活时，点击Login会触发signup-slide-out-to-right（Signup右滑消失）和login-slide-in-from-right（Login右滑进入）

移除默认动画后，JS动态设置的动画即可正常生效，不会被覆盖。

修改后的关键CSS片段

/* Show the active form */
.form.active {
  display: flex;
}

/* 保留其他原有动画定义不变 */
@keyframes slide-in {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

@keyframes signup-slide-in-from-left {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes login-slide-out-to-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}