Flexslider 褪色问题答案

【问题标题】：Flexslider fade issueFlexslider 褪色问题
【发布时间】：2014-07-15 10:02:58
【问题描述】：

我见过很多类似的问题，但没有一个能解决我的问题。我正在使用 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);

但还是有问题。

有什么想法吗？

【问题讨论】：

标签： html css firefox flexslider

【解决方案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;

【讨论】：