动画fade1正常生效但fade0失效，求排查原因

核心问题1：CSS关键帧语法错误 #

你的fadeAway和fadeIn关键帧定义中，每个关键帧块的结尾多了分号，导致浏览器无法正确解析淡出动画：

/* 错误写法 */
@keyframes fadeAway {
    from {opacity: 1};
    to {opacity: 0};
}

关键帧的from/to块仅用大括号包裹即可，块结尾不需要加分号，正确写法：

@keyframes fadeAway {
    from {opacity: 1}
    to {opacity: 0}
}
@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

核心问题2：动画切换触发失效 #

即使修复语法，直接替换类名可能导致浏览器不重新触发动画（动画默认仅执行一次）。可以通过先移除所有动画类，再延迟添加目标类的方式解决：

document.querySelectorAll(`button`).forEach(btn =>
  btn.addEventListener(`click`, () => {
    // 先移除所有动画类
    forgotPassword.classList.remove("fade0", "fade1");
    if (btn.id === 'login-btn') {
      // 延迟添加，让浏览器感知到类的变化
      setTimeout(() => forgotPassword.classList.add("fade1"), 10);
      submitLoginInfo.textContent = "Log In";
    } else {
      setTimeout(() => forgotPassword.classList.add("fade0"), 10);
      submitLoginInfo.textContent = "Sign Up";
    }
  })
);

完整可运行代码 #

HTML #

<h1 id="submitLoginInfo">-</h1>
<div id="forgotPassword">thing</div>
<button id="login-btn">fadein</button>
<button id="not-login-button">fadeout</button>

CSS #

.fade0 {
    animation: 1s fadeAway ease-out forwards;
}
.fade1 {
    animation: 1s fadeIn ease-in-out forwards;
}
@keyframes fadeAway {
    from {opacity: 1}
    to {opacity: 0}
}
@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

JavaScript #

const forgotPassword = document.getElementById('forgotPassword');
const submitLoginInfo = document.getElementById('submitLoginInfo');

document.querySelectorAll(`button`).forEach(btn =>
  btn.addEventListener(`click`, () => {
    forgotPassword.classList.remove("fade0", "fade1");
    if (btn.id === 'login-btn') {
      setTimeout(() => forgotPassword.classList.add("fade1"), 10);
      submitLoginInfo.textContent = "Log In";
    } else {
      setTimeout(() => forgotPassword.classList.add("fade0"), 10);
      submitLoginInfo.textContent = "Sign Up";
    }
  })
);

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