删除 class 后保留 CSS 转换属性

Question

是否可以在删除修改它们的 class 后保留 CSS 属性（包括变量）？

问题出在下面的代码中。在删除将框向左滑动的 class animation-slide-to-left 之后，我想保留青色框的变换属性。那是因为在删除 animation-slide-to-left 并添加 class animation-slide-to-right class 时，我希望新动画从旧动画结束的地方开始。

但问题是当删除 animation-slide-to-left 时，变换属性重置并等于添加 class 之前的旧值。

注意：我不想把transform属性硬编码在0%，因为有很多动画，我正在寻找一种自动解决问题的方法没有 JAVASCRIPT.

（将代码段结果扩展到整页，参见示例）

const box = document.querySelector (".animated");

function leftclicked (){
  box.classList.remove ("animation-slide-to-right");
  box.classList.add ("animation-slide-to-left");
}

function rightclicked (){
  box.classList.remove ("animation-slide-to-left");
  box.classList.add ("animation-slide-to-right");
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.animated {
  animation-duration: 0.5s;
 animation-delay: 0s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
}

.animation-slide-to-left {
 animation-name: slide-to-left;
}

.animation-slide-to-right {
 animation-name: slide-to-right;
}


@keyframes slide-to-left {
  100%{
    transform: translate(-150%, -50%);
  }
}

@keyframes slide-to-right {
  100%{
    transform: translate(50%, -50%);
  }
}

<div class="center" style="width:300px; height: 300px; background-color: red;">

  <div class="center animated" style="width: 50%; height: 50%; background-color:cyan;">
  </div>
  
  <button style="float:left;" onclick="leftclicked()">LEFT</button>
  <button style="float:right;" onclick="rightclicked()">RIGHT</button>
  
</div>

Answer 1

可以设置在CSS关键帧中每次点击LEFT和RIGHT按钮时的起始位置，这样当按钮在左侧，点击RIGHT按钮时，它首先将位置设置为左侧 (0%)，然后再向右侧 (100%) 设置动画，反之亦然。这样当点击按钮时它不会重置回中心。

const box = document.querySelector (".animated");

function leftclicked (){
  box.style.transform = 'translate(50%, -50%)';
  box.classList.remove ("animation-slide-to-right");
  box.classList.add ("animation-slide-to-left");
}

function rightclicked (){
  box.style.transform = 'translate(-150%, -50%)';
  box.classList.remove ("animation-slide-to-left");
  box.classList.add ("animation-slide-to-right");
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.animated {
  animation-duration: 0.5s;
 animation-delay: 0s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
}

.animation-slide-to-left {
 animation-name: slide-to-left;
}

.animation-slide-to-right {
 animation-name: slide-to-right;
}


@keyframes slide-to-left {
  100%{
    transform: translate(-150%, -50%);
  }
}

@keyframes slide-to-right {
  100%{
    transform: translate(50%, -50%);
  }
}

<div class="center" style="width:300px; height: 300px; background-color: red;">

  <div class="center animated" style="width: 50%; height: 50%; background-color:cyan;">
  </div>
  
  <button style="float:left;" onclick="leftclicked()">LEFT</button>
  <button style="float:right;" onclick="rightclicked()">RIGHT</button>
  
</div>

Answer 2

好吧事实证明，没有 JavaScript 就没有必要创建这样的行为。因为如果 CSS class 在运行时被替换，我们已经在使用 JavaScript。所以解决方案是在删除旧的 class 和添加新的 class

之前，在 JavaScript 中设置变换属性

删除 class 后保留 CSS 转换属性

Preserve CSS transform property after removing the class

html

css

css-transforms

css-animations

web

删除 class 后保留 CSS 转换 属性

Preserve CSS transform property after removing the class

html

css

css-transforms

css-animations

web

删除 class 后保留 CSS 转换属性