Twitter Bootstrap轮播 - Firefox中的css过渡

Question

我在Firefox中遇到css过渡问题。我使用Twitter Bootstrap轮播。我做了一些更改，因此图片不会从右向左滑动。相反，它们会淡入淡出。我还在旋转木马字幕上添加了一些css过渡。

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

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

我很感激任何建议。

Answer 1

尝试为要转换效果的属性声明基值，如本文所述：

Why is my CSS3 Transition not working in Firefox?

Answer 2

我遇到了同样的问题，动画在谷歌浏览器上效果很好，但在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);
    });
});