Jssor滑块：如何让带透明区域图片实现淡入淡出过渡？

问题描述 #

我使用Jssor实现了一款图片滑块，当前仅能完成新图片淡入的过渡效果，但旧图片不会淡出，而是在新图片完全淡入后直接消失。对于不透明图片来说，这种效果并无问题，因为新图片会直接覆盖旧图片；但我的图片存在透明区域，因此需要让旧图片也同步淡出。请问该如何实现这一效果？

我的当前代码如下：

jssor_1_slider_init = function() { 
    var jssor_1_SlideshowTransitions = [ 
        {$Duration:800,$Opacity:2} 
    ]; 
    var jssor_1_options = { 
        $AutoPlay: 1, 
        $LazyLoading: 1, 
        $SlideshowOptions: { 
            $Class: $JssorSlideshowRunner$, 
            $Transitions: jssor_1_SlideshowTransitions 
        } 
    }; 
    var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options); 
    /*#region responsive code begin*/ 
    var MAX_WIDTH = 256; 
    function ScaleSlider() { 
        var containerElement = jssor_1_slider.$Elmt.parentNode; 
        var containerWidth = containerElement.clientWidth; 
        if (containerWidth) { 
            var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth); 
            jssor_1_slider.$ScaleWidth(expectedWidth); 
        } else { 
            window.setTimeout(ScaleSlider, 30); 
        } 
    } 
}

解决方案 #

你遇到的问题核心是当前只配置了新图片的淡入逻辑（$Opacity:2仅控制新元素的不透明度变化），想要实现新旧图片同步的淡入淡出，需要在过渡规则里同时定义旧图片的淡出行为。

Jssor支持通过双元素参数配置来实现双向动画，你只需要修改过渡数组的配置，让旧图和新图在同一时长内完成透明度的反向变化：

方式一：明确配置新旧元素的透明度变化

var jssor_1_SlideshowTransitions = [
    {
        $Duration: 800,
        $Opacity: [
            { $Old: 0, $New: 1 }, // 旧图片从完全不透明淡出至透明
            { $Old: 1, $New: 0 }  // 新图片从透明淡入至完全不透明
        ]
    }
];

方式二：简洁的复合配置写法

var jssor_1_SlideshowTransitions = [
    {$Duration:800, $Opacity:2, $Opacity2:0}
];

这里$Opacity:2负责新图片的淡入动画，$Opacity2:0负责旧图片的淡出动画，两者会在800ms内同步完成，刚好适配你的透明图片场景，不会再出现旧图突然消失的问题。

另外可以留意下滑块容器的背景设置，如果容器背景颜色和图片透明区域冲突，记得将容器背景设为透明或者匹配的颜色，避免影响过渡视觉效果。

内容的提问来源于stack exchange，提问作者tmighty