Twitter Bootstrap 轮播 - Firefox 中的 css 转换
Posted
技术标签:
【中文标题】Twitter Bootstrap 轮播 - Firefox 中的 css 转换【英文标题】:Twitter Bootstrap carousel - css transition in Firefox 【发布时间】:2012-10-09 09:54:07 【问题描述】:我在 Firefox 中遇到 css 转换问题。我使用 Twitter Bootstrap 轮播。我做了一些更改,所以图片不会从右向左滑动。相反,它们淡入淡出。我还在轮播字幕上添加了一些 CSS 过渡。
这是我的代码:http://jsfiddle.net/Jh3rF/181/
在 Chrome 中一切正常,但在 Firefox(版本 16,Mac)中却不行。当我单击轮播中的下一个链接时,会有一个很好的过渡。活动幻灯片淡出,标题向右移动。但是下一张幻灯片的标题突然显示,而在 Chrome 中有一个很好的过渡(标题从上到下并且很好地淡入)。我在这里找不到任何错误。
如果有任何建议,我将不胜感激。
【问题讨论】:
【参考方案1】:尝试为您希望具有过渡效果的属性声明基值,如本文中所回答:
Why is my CSS3 Transition not working in Firefox?
【讨论】:
我也以为会是这样。我试过了,但没有帮助。 jsfiddle.net/Jh3rF/261【参考方案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);
);
);
【讨论】:
以上是关于Twitter Bootstrap 轮播 - Firefox 中的 css 转换的主要内容,如果未能解决你的问题,请参考以下文章
Twitter Bootstrap轮播不同高度图像导致弹跳箭头
Twitter Bootstrap 轮播 - Firefox 中的 css 转换