JSSOR

Question

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

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

这会导致图像在褪色时 move/scale。在 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

Answer 1

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

JSSOR - IE/Firefox 在 images/elements 上使用 CSS 变换的淡入淡出过渡问题

JSSOR - IE/Firefox issue with fade transition on images/elements with CSS transform