javascript - 删除前触发动画结束

Question

我得到了一个类为 whatever 的 div 元素:

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

还有一个带有 animate 类的按钮:

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

单击按钮时，它会为 div 设置动画 10 秒，弹跳、淡出、跳舞、旋转任何你想为这个例子想象的东西。

当完成动画显示时，div 将触发 animationend 事件。

完整代码:

$("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 仍在动画中，animationend 事件将永远不会被触发，并且警报永远不会显示:(

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

更新:

这是一个 JSFiddle 链接，它执行上述操作并尝试触发 animationend 事件，但它不起作用 D:

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

Answer 1

试试这个来强制触发事件:

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

关于你更新的问题，你只需要触发一个监听的事件，例如“animationend”。