如何在移除CSS类时触发反向CSS keyframes动画？

点击添加类按钮时，元素会播放宽度从0到100%的动画，但点击移除类按钮时，元素直接恢复初始状态，没有反向动画。下面提供两种可行的解决方法：

方法一：使用CSS Transition（推荐，更简洁） #

Transition 天生支持状态切换时的双向动画，只需定义元素初始状态和目标状态的属性，移除类时会自动触发反向过渡。

HTML（无需修改） #

<div>
  <div id="element-one">
    <div id="element-two"></div>
  </div>
  <button id="add-button">Add Class</button>
  <button id="remove-button">Remove Class</button>
</div>

CSS #

button {
  margin-top: 10px;
}

#element-one {
  width: 500px;
  height: 30px;
  background-color: lightgrey;
  border-radius: 8px;
  position: absolute; /* 修正原代码拼写错误：positon → position */
}

#element-two {
  /* 定义初始状态 */
  width: 0%;
  height: 100%;
  background-color: lightblue;
  border-radius: 8px;
  position: relative;
  top: 0;
  left: 0;
  /* 添加过渡效果 */
  transition: width 0.4s ease;
}

.animated {
  /* 目标状态 */
  width: 100%;
}

JavaScript（无需修改） #

const elementTwo = document.getElementById("element-two");
const addButton = document.getElementById("add-button");
const removeButton = document.getElementById("remove-button");

addButton.addEventListener("click", () => {
  elementTwo.classList.add("animated");
})

removeButton.addEventListener("click", () => {
  elementTwo.classList.remove("animated");
})

方法二：使用反向动画+监听动画结束事件 #

如果必须使用CSS Animation（比如动画包含多段关键帧），可以定义反向动画，点击移除按钮时先触发反向动画，等动画结束后再移除正向类。

HTML（无需修改） #

<div>
  <div id="element-one">
    <div id="element-two"></div>
  </div>
  <button id="add-button">Add Class</button>
  <button id="remove-button">Remove Class</button>
</div>

CSS #

button {
  margin-top: 10px;
}

#element-one {
  width: 500px;
  height: 30px;
  background-color: lightgrey;
  border-radius: 8px;
  position: absolute; /* 修正拼写错误 */
}

#element-two {
  width: 0%;
  height: 100%;
  background-color: lightblue;
  border-radius: 8px;
  position: relative;
  top: 0;
  left: 0;
}

.animated {
  animation-name: animateWidth;
  animation-duration: 0.4s;
  animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
}

.animated-reverse {
  animation-name: animateWidthReverse;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
}

@keyframes animateWidth {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes animateWidthReverse {
  0% { width: 100%; }
  100% { width: 0%; }
}

JavaScript #

const elementTwo = document.getElementById("element-two");
const addButton = document.getElementById("add-button");
const removeButton = document.getElementById("remove-button");

// 监听动画结束事件
elementTwo.addEventListener("animationend", (e) => {
  if (e.animationName === "animateWidthReverse") {
    // 反向动画结束后，移除正向类和反向类
    elementTwo.classList.remove("animated", "animated-reverse");
  }
});

addButton.addEventListener("click", () => {
  // 先移除反向类，再添加正向类
  elementTwo.classList.remove("animated-reverse");
  elementTwo.classList.add("animated");
});

removeButton.addEventListener("click", () => {
  // 先移除正向类，再添加反向类
  elementTwo.classList.remove("animated");
  elementTwo.classList.add("animated-reverse");
});

内容的提问来源于stack exchange，提问作者Michael Rýdl