Question

我遇到了问题。

我想播放CSS动画，然后让用户点击按钮将其恢复。因为在我未来的项目中会有很多这样的动画，我不想制作前向动画的关键帧和后向动画的关键帧。

因为它存在，我想使用＆＃34;动画方向：反向＆＃34;财产，但我遇到了一个问题：在我用方向播放动画后＃34;正常＆＃34;似乎我不能用＃34;反向＆＃34;属性。

.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;
}

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

这是一个问题的小提琴： https://jsfiddle.net/armoxo1q/1/

编辑：

我发现了这篇文章： https://css-tricks.com/restart-css-animation/

它表示要使用jquery或（在注释中）再次删除和附加元素以使用setTimeout。从处理的角度来看，我更喜欢setTimeout，因为浏览器不必重新分配和重新连接节点虽然从美学的角度来看我喜欢删除/追加模式，因为使用setTimeout你可以看到#container DIV折叠然后它动画的小闪光

我已将这些方法添加到我的小提琴中

Answer 1

问题是NOT EXISTS默认为animation-iteration-count，你的动画已经完成了那次迭代。

因此，您可以将其增加到1：

＆＃13;

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

＆＃13;

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";
});

＆＃13;

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;
  }
}

＆＃13;

CSS3无法反转动画

1 个答案: