javascript - 使用@keyframes 以不透明度淡出时，如何使用事件重复动画？

Question

如果用户试图拖放一个已经被拖动的元素，我会为用户弹出一个标签。

问题是，动画只发生一次，并且在动画结束时，它的不透明度将永远为 0。

CSS

@keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0;}
}

.o_tip{
    position: absolute;
    z-index: 999;

    display: none;
    opacity: 0;

    -webkit-animation: smooth 2s ease-in;
    -moz-animation: smooth 2s ease-in;
    -o-animation: smooth 2s ease-in;
    -ms-animation: smooth 2s ease-in;
    animation: smooth 2s ease-in;
}

为了说明我的问题，如果我在 opacity: 0.2 而不是 opacity: 0 上“结束”动画:

@keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0.2;}
}

...然后标签将针对每个事件重新出现 - 但它不会再次淡出，这是我想要做的。

Answer 1

您可以将动画规则放在特定的 css 类规则中，然后再次单击添加该类。请记住以下几点:

1. 您需要先删除动画类，然后再添加它才能产生任何效果。
2. 即使您遵循第一点，删除类并立即将其添加回去也不会有任何视觉效果。要触发回流，您可以使用以下语句:void targetDiv.offsetWidth;。

document.querySelector("#start-animation").onclick = function(e){
  var targetDiv = document.querySelector("#mydiv");
  targetDiv.className = "";
  void targetDiv.offsetWidth; // this triggers UI reflow
  targetDiv.classList.add("o_tip");
}//onclick

@keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0;}
}

.o_tip{
    z-index: 999;
    animation: smooth 2s ease-in forwards;
}

#mydiv{
  background-color: yellow;
  height: 50px;
  width: 100px;
}
#mydiv.o_top{
  display: block;
}

<div id="mydiv"></div>
<button id="start-animation">Start animation</button>