Cycle2 插件的初始化在 Windows 和 OSX 上的工作方式不同

Question

如果有关于此的类似问题，请指出我的方向。这个问题我很难描述，但我会尽力的：

这里的用户会看到从灰度渐变到彩色的图像幻灯片。这在 OSX 和 Windows 中的 Firefox 上工作得很好。（客户知道此效果在 IE 中不起作用，对此表示满意。）

但是，在 Chrome 和 Windows 中，第一张幻灯片的灰度没有褪色，而是保持彩色。

我怀疑这与 DOM 的加载方式以及 Cycle2 插件的初始化方式有关。

控制这个灰度效果的CSS如下：

   #home-featured .cycle-slide {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        -webkit-transition-property: -webkit-filter;
        -webkit-transition-duration: 4s;
        -webkit-transition-timing-function: ease;
        -webkit-transition-delay: 2s;
        transition-property: -webkit-filter, filter;
        transition-duration: 4s;
        transition-timing-function: ease;
        transition-delay: 2s;
  }

  #home-featured .cycle-slide-active {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
  }

我的问题是：有没有办法在不立即添加 cycle-slide-active class 的情况下初始化 Cycle2，让浏览器有时间意识到它需要执行 CSS 转换？

Answer 1

cycle2 我已经遇到过类似的问题将 .cycle-slide-active 更改为：

body.loaded .cycle-slide-active {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

所以效果将在文档加载上，在自动初始化准备就绪的第 2 个周期之后。

正在加载文档

$('body').addClass('loaded');

示例：http://jsfiddle.net/e70r1mtw/3/

您还可以使用 cycle-initialized event 在您想要激活转换的任何地方添加 class。

Cycle2 插件的初始化在 Windows 和 OSX 上的工作方式不同

The Initialization of Cycle2 plugin works differently on Windows than on OSX

javascript

jquery

css-transitions

cycle2