表单容器无法滑出求助：滑入正常但滑出无响应

问题 #

form-container元素无法实现滑出效果，点击按钮后仅heading元素正常滑出，form-container完全无位移，但滑入功能正常。尝试让phoneInput单独滑出时，元素会卡在容器末端。

原因 #

CSS样式优先级冲突：.form-container类的transform属性与.slide-out类优先级相同，导致添加.slide-out时，原类的transform（被slide-in动画设置为translateX(0%)）不会被覆盖，无法触发滑出动画。

解决方案 #

方案1：提升滑出类优先级（推荐） #

通过组合选择器提高.slide-out的优先级，确保其样式能覆盖元素原类的样式：

修改CSS中的.slide-out类为：

.heading.slide-out {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}

.form-container.slide-out {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}

同时调整初始滑入的触发方式（避免直接在元素类中写动画，减少冲突）：

1. 移除.heading和.form-container中的初始动画代码：

/* 原代码中的这部分要删掉 */
animation: slide-in 0.5s forwards;
-webkit-animation: slide-in 0.5s forwards;

2. 添加一个.slide-in类：

.slide-in {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

3. 在JS中页面加载时触发滑入：

window.addEventListener('load', () => {
  document.querySelector('.heading').classList.add('slide-in');
  document.querySelector('.form-container').classList.add('slide-in');
});

方案2：使用!important（快速临时修复） #

如果不想调整结构，可以给.slide-out类添加!important强制覆盖样式：

.slide-out {
  transform: translateX(100%) !important;
  -webkit-transform: translateX(100%) !important;
  animation: slide-out 0.5s forwards !important;
  -webkit-animation: slide-out 0.5s forwards !important;
}

注意：!important会增加样式维护难度，非必要不推荐使用。

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