JSSOR - IE/Firefox 问题，带有 CSS 转换的图像/元素上的淡入淡出过渡答案

【问题标题】：JSSOR - IE/Firefox issue with fade transition on images/elements with CSS transformJSSOR - IE/Firefox 问题，带有 CSS 转换的图像/元素上的淡入淡出过渡
【发布时间】：2015-05-01 07:58:49
【问题描述】：

我正在使用 JSSOR 制作幻灯片，其中包含使用多个 HTML 元素的幻灯片，其中包括带有 CSS 转换和缩放样式的图像元素。这些 CSS 属性是必要的，因为用户可以在另一个页面上移动图像。

当您拖动/滑动幻灯片时，滑块会正常工作。但是在使用标准淡入淡出转换的自动播放时，会发生一些奇怪的事情。在 Internet Explorer 和 Firefox 上，当淡入淡出开始时，它会以某种方式禁用元素的变换 CSS。当淡入淡出完成后，Transform CSS 又回来了。

这会导致图像在褪色时移动/缩放。在 Chrome 上没有任何反应，淡入淡出正常工作。

我使用的基本幻灯片如下：

<div class="slide" idle="10000">
<div class="image-slide">
    <div class="image-container" style="transform: translate(66px, 108px) scale(1.61742);">
        <img src="/someimage.jpg">
    </div>
    <div class="svg-elements">
    </div>
    <div class="textArea" id="text1"
        <span>Lorem ipsum dolor</span>
    </div>
</div>

以此作为 JSSOR 的设置：

var _SlideshowTransitions = [ { $Duration: 1200, $Opacity: 2 } ];
var options = {
$AutoPlay: true,
$AutoPlayInterval: 4000,
$PauseOnHover: 0,
$SlideshowOptions: {                                
    $Class: $JssorSlideshowRunner$,               
    $Transitions: _SlideshowTransitions,           
    $TransitionsOrder: 1,                           
    $ShowLink: true                                   
}

};

更新

I've added a fiddle with the same results

【问题讨论】：

标签： jssor

【解决方案1】：

这是一个错误，我刚刚修复并更新了它。请下载最新版本。

【讨论】：