删除类后保留 CSS 变换属性答案

【问题标题】：Preserve CSS transform property after removing the class删除类后保留 CSS 变换属性
【发布时间】：2020-06-12 18:45:48
【问题描述】：

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

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

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

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

（将 sn-p 结果扩展到整页也请参见示例）

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>

【问题讨论】：

标签： html css web css-animations css-transforms

【解决方案1】：

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

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>

【讨论】：

我不想使用 JAVASCRIPT 或在 CSS 中硬编码，如注释中所述。谢谢
@EEAH 你是对的，对不起！我现在对其进行了编辑，以便在 CSS 关键帧而不是 Javascript 中发生相同的行为。
现在唯一的问题是，当您第一次单击按钮时，它会重置为左侧或右侧，此时框仍在中心。目前我想不出解决方案，但也许有人会有建议。不过，我希望到目前为止我能提供帮助:)
谢谢。但就像我在答案中所说的那样，无论如何都使用 JavaScript。所以使用 JavaScript 来实现这种行为会很方便
之前的 JavaScript 解决方案（编辑前）应该是答案

【解决方案2】：

好吧，事实证明，没有 JavaScript 就没有必要创建这样的行为。因为如果在运行时替换 CSS 类，我们已经在使用 JavaScript。所以解决方法是在移除旧类之后，添加新类之前在 JavaScript 中设置 transform 属性

【讨论】：