Twitter bootstrap旋转木马 - Firefox中的CSS过渡

Question

我在Firefox中的CSS过渡有问题。我使用Twitter bootstrap旋转木制。我已经进行了一些更改，因此图片不会从右到左滑动。相反，他们淡入并消失了。我还在轮播字幕上添加了一些CSS过渡。

这是我的代码：http：//jsfiddle.net/jh3rf/181/

Chrome中的一切正常，但在Firefox（Mac版本16）中不行。当我单击旋转木马中的下一个链接时，会有一个不错的过渡。主动滑动逐渐消失，字幕向右移动。但是，下一个幻灯片的标题突然显示出来，而在Chrome中有一个很好的过渡（字幕从上到向下，它逐渐淡出）。我在这里找不到任何错误。

我会感谢任何建议。

Answer 1

尝试声明要具有过渡效果的属性的基本值，如本文所述：

为什么我的CSS3过渡在Firefox中不起作用？

Answer 2

我遇到了同样的问题，动画在Google Chrome上效果很好，但在Firefox中，它突然出现了。

所以我所做的很简单，它会在下一个幻灯片到来时删除和添加类。

所以这是代码：

$('#carousel-main').on('slide.bs.carousel', function (e) {
    $(e.relatedTarget).find('.animated').each(function() {
        var item = $(this);
        var classes = item.attr('class');
        item.attr('class', '');
        item.hide();
        setTimeout(function(){
            item.show();
            item.addClass(classes);
        }, 10);
    });
});