转换不适用于删除类的转换答案

【问题标题】：transition not working for transform on class removal转换不适用于删除类的转换
【发布时间】：2021-02-25 14:33:33
【问题描述】：

我已经写了这段代码：

setTimeout(() => {
  document.querySelector('.page-holder').children[0].children[0].classList.remove("enable");
}, 2000);

@keyframes appearPageShower {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

.each-page {
  width: 20px;
  height: 50px;
  overflow: hidden;
  background-color: black;
}

.each-page .backgroundColor {
  background-color: blue;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
  transition: transform 1s ease;
}

.each-page .backgroundColor.enable {
  animation: appearPageShower 1s ease;
}

<div class="page-holder">
  <div class="each-page">
    <div class="backgroundColor enable"></div>
  </div>
</div>

动画效果很好，问题是，在从 div 中删除“启用”类之后，我想 transton 会起作用，但它会被变换弹出。提前致谢

【问题讨论】：

您能否明确说明您希望在动画完成后发生什么？我看到它有效，但我不确定你之后想要发生什么。

标签： javascript html css css-animations css-transitions

【解决方案1】：

使用animation-fill-mode

.each-page .backgroundColor.enable {
  animation: appearPageShower 1s ease;
  animation-fill-mode: forwards;
}

animation-fill-mode 保持动画结束后的最终样式...

【讨论】：

不是我想要的，我改变了对问题的看法并以不同的方式解决了它。谢谢

【解决方案2】：

animation-fill-mode: forwards; 的作用是让蓝色在跌落后保持在原位，但以下也可以：

在 .backgroundColor 中：

.each-page .backgroundColor {
  background-color: blue;
  width: 100%;
  height: 100%;
  /*transform: translateY(100%); Change to below*/ 
  transform: translateY(0);
  /*animation: appearPageShower 1s ease; Note this out or remove*/
}

我已经使用记下的脚本和脚本对此进行了测试，并且无论哪种方式都可以正常工作。除非您有进一步的计划，否则我会删除该脚本。

虽然在 .backgroundColor 中调用动画是完全有效的，但在这两个 css 类中都是多余且不必要的。

通过调用translateY(100%);，我怀疑蓝色矩形正在（1 * 宽度）超过黑色矩形。

【讨论】：

不是我想要的，我改变了对问题的看法并以不同的方式解决了它。谢谢