CSS3无法反转动画

Posted 2023-02-19

【中文标题】CSS3无法反转动画

【英文标题】：CSS3 Unable to reverse animation

【发布时间】：2015-11-06 15:25:57

【问题描述】：

我有一个问题。

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

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

.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 或（在 cmets 中）再次删除和附加元素以使用 setTimeout。 从处理的角度来看，我更喜欢 setTimeout，因为浏览器不必分离并重新附加节点 虽然从美学的角度来看我喜欢删除/附加模式，因为使用 setTimeout 你可以看到#container DIV 折叠然后动画的一点闪光

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

【参考方案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>

【讨论】：

感谢您的回复。但是，如果我在展开时将迭代设置为 2，我将获得两次展开动画，然后我将在折叠时遇到同样的问题，如果我将其设置为折叠，就像在你的 sn-p 中一样，我看不出有任何区别=/.