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

【问题标题】：The Initialization of Cycle2 plugin works differently on Windows than on OSXCycle2 插件的初始化在 Windows 上与在 OSX 上的工作方式不同
【发布时间】：2015-11-16 00:19:52
【问题描述】：

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

http://jsfiddle.net/e70r1mtw/

这里的用户会看到从灰度渐变到彩色的图像幻灯片。这在 OSX 和 Windows 中的 Firefox 上运行良好。（客户知道这种效果在 IE 中不起作用，并且可以接受。）

但是，在 Windows 上的 Chrome 中，第一张幻灯片不会从灰度中消失，而是保持颜色。

我怀疑这与 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 类的情况下初始化 Cycle2，让浏览器有时间意识到它需要执行 CSS 转换？

【问题讨论】：

Chrome 44，Win 7，每张幻灯片都有褪色效果
@JakubMichálek：请阅读问题。问题不在于幻灯片褪色。这是第一张幻灯片以彩色而不是灰度开始。此问题存在于 OSX 上的 Safari 和 Win7 上的 Chrome 44 中。 Firefox 自 38 版以来似乎已修复此问题，并在 40 版中运行。
我的意思是，对我来说，第一张幻灯片确实开始灰度，颜色淡入恰到好处。我什至尝试关闭缓存并刷新，但我总是在第一张幻灯片上色之前看到它是灰度的。 ;)
@JakubMichálek 很奇怪。我已经在几台 Windows 机器上对此进行了测试，但它们都无法与 Chrome 44 一起使用。你安装的 chrome 有什么特别之处吗？
我有一个版本为 44.0.2403.157 m 的 chrome。我还可以看到第一张幻灯片的灰度到颜色过渡。尝试将转换延迟增加到 4 秒，然后看看您在第一张幻灯片上得到了什么效果。或者尝试仅出于调试目的使用较小的图像。

标签： javascript jquery css-transitions cycle2

【解决方案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 在您想要激活转换的任何位置添加一个类。

【讨论】：

完美运行！绝妙的答案！