我的javascript removeClass + addClass时，点击只在Chrome上工作，而不是Firefo

Question

出于某种原因，我的javascript块删除/添加类时，点击一个链接只适用于谷歌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的情况下使用现代web浏览器，它可以完美地工作。我不认为CSS是问题所在。

编辑# 2:显然，它可以在别人的IE10和IE11上运行，但就是不能在我的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/