登录/注册表单翻转动画中内容显示异常的解决方法求助

问题背景 #

开发登录/注册翻转表单，默认显示「Se connecter」（登录），点击「S'enregistrer」（注册）时容器翻转展示注册界面。当前通过切换hidden类控制表单显示（修改max-height实现），但翻转动画时长0.8s，表单切换瞬间完成，导致动画前0.4s会显示反面的错误表单内容，需要在动画进行到0.4s时精准切换表单。

解决方案 #

方法1：JavaScript配合定时器精准控制切换时机 #

利用JavaScript监听切换按钮的点击事件，先触发翻转动画，再设置与动画一半时长匹配的定时器，在0.4s后切换表单的hidden类。

代码示例

CSS（补充翻转动画）：

.form {
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
}

.form.flipped {
  transform: rotateY(180deg);
}

.form .login-form,
.form .register-form{
    max-height: 500px;
}

.form .login-form.hidden,
.form .register-form.hidden{
    max-height: 0;
    overflow: hidden;
}

JavaScript：

const toggleBtn = document.querySelector('[data-toggle-form]'); // 替换为你的按钮选择器
const formContainer = document.querySelector('.form');
const loginForm = formContainer.querySelector('.login-form');
const registerForm = formContainer.querySelector('.register-form');

toggleBtn.addEventListener('click', () => {
  // 触发翻转动画
  formContainer.classList.toggle('flipped');
  
  // 延迟0.4s（动画时长的一半）切换表单显示状态
  setTimeout(() => {
    loginForm.classList.toggle('hidden');
    registerForm.classList.toggle('hidden');
  }, 400);
});

方法2：纯CSS关键帧+过渡延迟控制 #

通过CSS过渡的延迟属性，让表单的可见性切换刚好匹配翻转动画的中间点，无需JavaScript。

代码示例

.form {
  position: relative;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
}

.form.flipped {
  transform: rotateY(180deg);
}

.form .login-form,
.form .register-form {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  backface-visibility: hidden;
  /* 默认状态：可见，过渡延迟设为0.4s（动画一半时长） */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.1s linear, visibility 0s linear 0.4s;
}

/* 注册表单默认处于翻转状态 */
.form .register-form {
  transform: rotateY(180deg);
}

/* 翻转后：登录表单立即隐藏，注册表单延迟0.4s后显示 */
.form.flipped .login-form {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, 0s;
}

.form.flipped .register-form {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.4s, 0.4s;
}

说明：此方法利用backface-visibility: hidden配合过渡延迟，让表单的可见性切换刚好在翻转动画进行到一半时触发，避免显示错误内容。

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