javascript - 转换不适用于删除类的转换

Question

我写了这段代码：

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 会起作用，但它会被变换弹出。提前致谢

标签： javascripthtmlcsscss-animationscss-transitions

Answer 1

利用animation-fill-mode

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

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