CSS3 无法反转动画

Question

我有一个问题。

我想播放一个 CSS 动画，然后让用户通过单击按钮将其还原。因为在我 future 的元素中会有很多这样的动画，所以我不想为前向动画和后向动画制作关键帧。

因为它存在我想使用“动画方向:反向”属性但是我遇到了一个问题:在我以“正常”方向播放动画后，我似乎无法再使用“反向”属性播放动画。

.expand-bl {
    animation: expand-bl-kf 1s;
    animation-fill-mode: both;
    animation-direction: normal;
}
.collapse-bl {
    animation: expand-bl-kf 1s;
    animation-fill-mode: both;
    animation-direction: reverse;
}

这是为什么呢？有谁知道解决方法吗？

这是一个解决问题的 fiddle : https://jsfiddle.net/armoxo1q/1/

编辑:

我找到了这篇文章: https://css-tricks.com/restart-css-animation/

它说使用 jquery 或(在注释中)再次删除并附加元素以使用 setTimeout。从处理的 Angular 来看，我更喜欢 setTimeout，因为浏览器不必分离并重新附加节点虽然从美学的 Angular 来看我喜欢删除/附加模式，因为使用 setTimeout 你可以在 #container DIV 折叠的地方看到一个小闪光，然后它会动画

我已将这些方法添加到我的 fiddle 中

Answer 1

问题是 animation-iteration-count 默认为 1，而您的动画已经完成了该次迭代。

因此，您可以将它增加到 2:

.collapse-bl {
    animation: expand-bl-kf 1s;
    animation-fill-mode: both;
    animation-direction: reverse;
    animation-iteration-count: 2;
}

document.getElementById("container").className = "expand-bl";

document.getElementById("container").addEventListener("animationend", function (e) {
  console.log(e)
  if (e.animationName === "expand-bl-kf" && e.target.className === "expand-bl") document.getElementById("close").style.display = "block";
  else if (e.animationName === "expand-bl-kf" && e.target.className === "collapse-bl") document.getElementById("close").style.display = "none";
});

document.getElementById("close").addEventListener("click", function () {
  document.getElementById("container").className = "collapse-bl";
});

body, html {
  margin: 0;
  padding: 0;
}
#close {
  display: none;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 999;
}
#stage {
  width:600px;
  height:600px;
  background-color: pink;
}
#container {
  width:300px;
  height:250px;
  background-color: orange;
  position: absolute;
  left: 300px;
  top: 0px;
}
.expand-bl {
  animation: expand-bl-kf 1s;
  animation-fill-mode: both;
  animation-direction: normal;
}
.collapse-bl {
  animation: expand-bl-kf 1s;
  animation-fill-mode: both;
  animation-direction: reverse;
  animation-iteration-count: 2;
}
@keyframes expand-bl-kf {
  from {
    width:300px;
    height:250px;
    left: 300px;
    top: 0px;
  }
  to {
    width:600px;
    height:600px;
    left: 0px;
    top: 0px;
  }
}

<button id="close">close</button>
<div id="stage">
  <div id="container" class="container"></div>
</div>