javascript - 单击时我的 removeClass + addClass javascript 仅适用于 Chrome 但不适用于 Firefox 或 IE

Question

出于某种原因，我在单击链接时删除/添加类的 javascript 片段仅适用于 Google Chrome。在 Firefox 上，它执行一次，然后不再重复。在 IE 上，它根本不起作用。 (最新版本的 Firefox 和 Chrome，IE 11)

如果有人能指出我正确的方向，那将不胜感激!

此处问题的简单 JSFiddle:http://jsfiddle.net/UDxtM/

这是javascript:

$('[data-toggle="tab"]').click(function() {
    $('.tab-pane').removeClass('animated flipInY');
    $('.tab-pane').addClass('animated flipInY');
});

一些虚拟内容:

<ul class="main-nav">
    <li><a href="#front" data-toggle="tab">Front</a></li>
    <li><a href="#back" data-toggle="tab">Back</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="front">
        <img src="http://lorempixel.com/400/200/" />
    </div>

    <div class="tab-pane" id="back">
        <img src="http://placehold.it/400x200" />
    </div>
</div>

编辑#1:CSS 过渡来自 animate.css http://daneden.github.io/animate.css/ .如果我只是在没有 javascript 的情况下使用它们，它就可以在现代网络浏览器上完美运行。我不认为 CSS 是问题所在。

编辑#2:显然它适用于其他人的 IE10 和 IE11，但不适用于我的。这仍然存在 Firefox 只播放一次代码的问题。

Answer 1

您正在删除这些类并在之后立即再次添加它们——因此如果浏览器出于性能优化的原因决定不在这两个操作之间进行重新绘制，则根本不会有任何可见的效果。

通过使用一个小超时来“解耦”再次添加类，它似乎也适用于 FF:

$('[data-toggle="tab"]').click(function () {
    $('.tab-pane').removeClass('animated flipInY');
    setTimeout(function () {
        $('.tab-pane').addClass('animated flipInY');
    },
    10);
});

http://jsfiddle.net/UDxtM/3/