表单Input标签点击上移动画失效，请求技术排查

我尝试实现点击Input时，对应的Label向上移动的动画，逻辑是点击Input时给Label添加包含动画的类，但功能完全没反应。我觉得动画代码和函数逻辑都没问题，找不到问题出在哪。

故障原因与修复方案 #

1. 类名操作错误（核心问题） #

在JS中调用classList.add/remove时，你给类名加了.前缀，比如.username-focus-label-animation，但这个方法只需要传入纯类名字符串，不需要带.。错误的类名导致动画类无法被正确添加到Label元素上，这是动画不生效的直接原因。

2. 动画函数名拼写错误 #

CSS中动画名usenramefocusLabelAnimation和usenrameBlurLabelAnimation都少了一个字母r，正确应该是usernamefocusLabelAnimation和usernameBlurLabelAnimation，否则即使类名正确，动画也无法触发。

3. 事件监听场景不全 #

仅监听click事件会漏掉用户通过Tab键聚焦输入框的情况，改用focus和blur事件能覆盖所有输入框聚焦/失焦的场景，体验更完善。

修复后的完整代码 #

JavaScript #

let $ = document
let usernameInputLabel = $.querySelector(".username-input-label")
let usernameInput = $.querySelector(".username-input")

// 聚焦时添加动画类
function focusHandler() {
  usernameInputLabel.classList.add("username-focus-label-animation")
  usernameInputLabel.classList.remove("username-blur-label-animation")
}

// 失焦时移除动画类（如果输入框为空）
function blurHandler() {
  if (!usernameInput.value.trim()) {
    usernameInputLabel.classList.add("username-blur-label-animation")
    usernameInputLabel.classList.remove("username-focus-label-animation")
  }
}

// 绑定事件
usernameInput.addEventListener("focus", focusHandler)
usernameInput.addEventListener("blur", blurHandler)

CSS #

* {
  margin: 0;
  padding: 0;
  font-family: urbanist;
}

body {
  height: 100vh;
  background-color: #496d8d;
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  width: 130%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

input {
  border: none;
  border-bottom: 1px solid #082c4c;
  width: 100%;
  background-color: #224f3900;
  padding: 0.2rem 0 0.2rem 0;
  z-index: 99999;
  position: relative;
  color: #ddd;
  font-size: 1.5rem;
  font-weight: 100;
}

input:focus {
  outline: none;
}

.group {
  width: 60%;
}

label {
  display: inline-block;
  transform: translate(0, 2.1rem);
  user-select: none;
  color: #ddd;
}

.username-focus-label-animation {
  animation: usernamefocusLabelAnimation 700ms forwards;
}

@keyframes usernamefocusLabelAnimation {
  from {
    transform: translate(0, 2.1rem);
  }
  to {
    transform: translate(0, 0.1rem);
  }
}

.username-blur-label-animation {
  animation: usernameBlurLabelAnimation 700ms forwards;
}

@keyframes usernameBlurLabelAnimation {
  from {
    transform: translate(0, 0.1rem);
  }
  to {
    transform: translate(0, 2.1rem);
  }
}

button:not(.show-password) {
  background-color: #082c4c;
  scale: 1.8;
  padding: 0.3rem;
  border: none;
  border-radius: 10%;
  cursor: pointer;
  color: #ddd;
  box-shadow: 0 5px 5px 2px #082c4c70, 0 2px 10px -1px #0f497b inset;
  transition: 500ms;
}

button:not(.show-password):hover {
  box-shadow: 0 0px 0px 0px #082c4c70, 0 2px 10px -1px #0f497b inset;
  background-color: #07345b;
}

.heading {
  font-size: 4rem;
  color: #ddd;
  font-weight: 200;
  text-align: center;
  text-shadow: 0 5px 10px #082c4c90, 0 15px 10px #082c4c90, 0 25px 10px #082c4c90;
}

.login-container {
  width: 30%;
  height: 90vh;
  padding: 0.5rem;
  backdrop-filter: blur(20px);
  background-color: #1d5582;
  border-radius: 10%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 3rem;
  box-shadow: 0 10px 50px 1px #082c4c inset
}

HTML #

<div class="login-container">
  <p class="heading">sign in to your account</p>
  <form>
    <div class="username-group group">
      <label class="username-input-label " for="username-input">User name</label>
      <input class="username-input" type="text">
    </div>
    <div class="password-group group">
      <label class="password-input-label" for="password-input">password</label>
      <input class="password-input" type="text">
      <!-- <button class="show-password">show password</button>    -->
    </div>
    <div class="confirm-password-group group">
      <label class="confirm-password-input-label" for="confirm-password-input">confirm password</label>
      <input class="confirm-password-input"></input>
    </div>
    <div class="email-group group">
      <label class="email-input-label" for="email-input">email adress</label>
      <input class="email-input"></input>
    </div>
  </form>
  <button class="sign-up">sign up</button>
</div>

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