animationEnd/.removeClass 在 Firefox 中不起作用

Question

我正在尝试在 Javascript 中删除动画末尾的类，它在 Chrome 中运行良好，但在 Firefox 中无法运行。

应该发生的事情是在 mouseenter 上，一个类 (.shine) 被添加到另一个类 (greentile)。 .shine 在 CSS 中播放精灵动画，然后 Javascript 将其从 greentile 中删除。除了在 Firefox 中，.shine 会保留，这意味着动画只会播放一次，不会再播放。

$(".greentile").bind("webkitAnimationEnd msAnimationEnd oAnimationEnd animationEnd", function () 
{
    $(this).removeClass("shine");
});

$(".greentile").mouseenter(function () 
{
    $(this).addClass("shine");
});

这太简单了，我觉得它不应该是一个问题，而且非常令人沮丧。 Firefox Inspector 显示 mouseenter 仍在被触发，这让我相信它根本没有删除 .shine。我还尝试更改和检测 AnimationEnd 上的前缀以实现兼容性，我在这里和其他地方（如 Github、Doctype、CSS Tricks）查看了数十个相关或半相关的问题，并且我仔细阅读了 w3schools、javascript 文档和 Firefox文档，我仍然无法弄清楚。

我对 Web 开发非常陌生，所以如果我忽略了一些明显的事情，请原谅我。 谢谢

编辑：这是一个jFiddle，显示它的实际效果。

Answer 1

事件名称区分大小写。 Firefox 听的是官方名称animationend（注意小写的E！），而不是旧的mozAnimationEnd。