Question

我有一个带有whatever类的div元素：

<div class="whatever"></div>

一个类animate的按钮：

<button class="animate">Animate</button>

当点击该按钮时，它将为div设置动画10秒钟，弹跳，褪色，跳舞，旋转任何你想要的例子。

当div完成显示警报的动画时，div将触发和动画事件。

完整的代码：

$("button.animate").click(function() {
    $("div.whatever").addClass("animationThatSeemsCool").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
        alert("Whatever has finished animating!");
    });
});

一切似乎工作正常，但现在城里还有另一个按钮！

这是一个类nukeit的按钮：

<button class="nukeit">Wipe whatever out!</button>

该按钮的名称如下所示：

$("button.nukeit").click(function() {
    $("div.whatever").remove();
});

到目前为止，一切似乎仍然很好，但问题是D：

当用户按下animate按钮并按下nukeit按钮时，whatever仍然会动画动画，并且永远不会触发事件，并且警告永远不会显示：（

如何在按下nukeit时手动触发animationend事件？

更新

这是一个JSFiddle链接，它在上面执行并试图触发animationend事件，但它没有工作D：

https://jsfiddle.net/seahorsepip/nyvfLee7/

Answer 1

尝试此操作以强制触发事件：

$("div.whatever").trigger('animationend');

关于您更新的问题，您只需要触发其中一个收听的事件，例如'animationend'。

Answer 2

解决方案是删除你添加的非常简单的动画类;）

结帐

＆＃13;

$("button.animate").click(function() {
  $("div.whatever").addClass("animation").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
    alert("Whatever has finished animating!");
  });
});

$("button.nukeit").click(function() {
  $("div.whatever").removeClass("animation");
  $("div.whatever").trigger('animationend');
});

＆＃13;

.whatever {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: red;
}
.animation {
  animation: rotate 10s linear 1;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="whatever"></div>
<button class="animate">Animate</button>
<button class="nukeit">Wipe whatever out!</button>

＆＃13;

删除之前触发animationend

2 个答案: