javascript - 为什么 bxSlider 会破坏最后一张幻灯片和第一张幻灯片之间的过渡？

Question

我正在使用 bxSlider，对于每张幻灯片，我都有几个 HTML 元素，而不仅仅是一个图像。我需要使事件幻灯片比其他幻灯片更大，我已经使用 css 缩放和过渡完成了这一点，但是当我从第一张幻灯片移动到第二张幻灯片或从第二张幻灯片移动到第一张幻灯片时，我的过渡丢失了，我意味着它只会长大，但不会执行动画，所有其他幻灯片都可以，有人知道为什么这个过渡会中断吗？

这是我的代码

$('#sliderTrend').bxSlider({
            slideWidth: 300,
            minSlides: 1,
            maxSlides: 3,
            moveSlides: 1,
            slideMargin: 3,
            pager: false,
            onSliderLoad: function () {
                $('#sliderTrend>div:not(.bx-clone)').eq(1).addClass('active-slide');
                $('#sliderTrend>div:not(.bx-clone)').eq(1).removeClass('inactive-slide');
            },
            onSlideBefore: function ($slideElement, oldIndex, newIndex) {
                $('.slideC2').removeClass('active-slide');
                $('.slideC2').addClass('inactive-slide');
                $($slideElement).next().removeClass('inactive-slide');
                $($slideElement).next().addClass('active-slide');
            }
        });

这些是我的 css 类

.active-slide {
    zoom:100%;
    margin-top:0px;
    -moz-transition:  zoom 150ms linear, margin-top 150ms linear;
    -webkit-transition:  zoom 150ms linear, margin-top 150ms linear;
    -o-transition: zoom 150ms linear, margin-top 150ms linear;
    transition: zoom 150ms linear, margin-top 150ms linear;
}

.inactive-slide {
    zoom:75%;
    margin-top:60px;
    -moz-transition:  zoom 150ms linear, margin-top 150ms linear;
    -webkit-transition:  zoom 150ms linear, margin-top 150ms linear;
    -o-transition: zoom 150ms linear, margin-top 150ms linear;
    transition: zoom 150ms linear, margin-top 150ms linear;    
}

Answer 1

SO36637125

为什么 bxslider 会中断最后一张幻灯片和第一张幻灯片之间的过渡？

很难确定 bxSlider，它是一个非常灵活但喜怒无常的插件。我相信这是回调太多了。每个 slider 都会同时删除和添加 2 个类，这对于像 JavaScript 这样的单线程语言来说是不健康的行为。

在处理事件和非事件状态时，您应该知道 bxSlider 有自己的 .active 类，并且事件 slider 始终是左侧的幻灯片，而不是中间的幻灯片。因此考虑到这一点，这就是所做的事情:

• 删除了 .inactive-slide 类。不要使用两个状态来处理，而是使用事件状态并使用默认状态(这就是幻灯片通常的样子)。

• 将 .active-slide 类更改为 .act，因为这样可以节省打字时间。将 CSS 规则更改为:

    .act {
       transition-duration: 1s;
       transition-timing-function: ease-in;
       transform: scale(2);
       transform-origin: center center;
       z-index: 9999999;
    }
  

  • 使用 z-index 将幻灯片左右重叠。

  • 请注意，没有 position 属性。这是因为默认情况下每张幻灯片都是 position:relative。

  -有关动画属性的详细信息，可以找到here .

• 删除了 onSliderLoad 回调，因为它不稳定。我已经使用 bxSlider 几年了，但我只能够让它工作几次。

• 更改了 onSlideBefore 回调以简化它:

    onSlideBefore: function($ele, from, to) {
       var $act = $ele.next();
       $act.addClass('act');
       $act.siblings().removeClass('act');
    }
  

  • 第一行基本上引用位于左侧的真实事件 slider (即 $ele)，并针对事件幻灯片之后的下一张幻灯片，因此现在 .act 类将被分配到中间幻灯片。
  • 第二行 .addClass('act') 到中间幻灯片(即 $act)。
  • 最后一行使用 .siblings() 从每张幻灯片中删除 .act 类，确保只有一张 $act 幻灯片，除了$行动。
  • 这是可行的，因为只有一个类需要处理。

README.md

PLUNKER