html - Flexslider 淡入淡出问题

Question

我已经看到很多类似的问题，但没有一个能解决我的问题。我正在使用 flexslider 2.2.0，当我实现淡入淡出动画时，该功能在 Firefox 版本 30 中被破坏。在 IE、Chrome 等中没有问题。我使用以下代码

<script src="site/flexslider/jquery.flexslider.js"></script>

<script>
jQuery(document).ready(function($) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
   $('.flexslider').flexslider({
        animation: "fade",
        slideshowSpeed: 10000, 

        });
});
</script>

如果我使用幻灯片动画，那么它们在所有浏览器上都没有问题。

我试过了

查找并替换 flexslider.js 中的代码:

查找:事件类型 =(触摸)？ "touchend": "点击",

替换:eventType = "点击touchend MSPointerUp",

同时删除:el.addEventListener('touchstart', onTouchStart, false);

但是还是有问题。

有什么想法吗？

Answer 1

他们没有为过渡设置动画，因此您可能需要添加一些 CSS 过渡。我用 sass compass 做了这个:

.flexslider .slides > li { 
  @include transition(opacity 1s ease);
}

它添加了这些前缀:

-webkit-transition: opacity 1s ease; 
-moz-transition: opacity 1s ease;
 transition: opacity 1s ease;