Question

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

当您拖动/滑动幻灯片时，滑块可以正常工作。但是在使用标准Fade过渡的自动播放中，会发生一些奇怪的事情。在淡入淡出启动时，在Internet Explorer和Firefox上，它会以某种方式禁用元素的Transform 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

Answer 1

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

JSSOR - 使用CSS转换对图像/元素进行淡入淡出过渡的IE / Firefox问题

1 个答案: