我正在使用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;
}

最佳答案

SO36637125

为什么bxslider破坏了我在上一张和第一张幻灯片之间的过渡?

使用bxSlider很难确定,它是一个非常灵活但很气质的插件。我相信这是回调太多。每个滑块一次删除并添加2个类,对于像JavaScript这样的单线程语言来说,这不是正常的行为。

在处理活动状态和非活动状态时,您应该知道bxSlider拥有自己的.active类,活动滑块始终是左侧的幻灯片,而不是中间的幻灯片。因此,考虑到这一点,这是完成的操作:


删除了.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');
  }



第一行基本上引用了位于左侧(即$ele)的实际活动滑块,并以该活动幻灯片之后的下一个幻灯片为目标,因此现在.act类将分配给中间幻灯片。
第二行.addClass('act')到中间的幻灯片(即$act)。
最后一行通过使用$act从除.siblings()之外的每张幻灯片中删除.act类,确保只有一个$act幻灯片。
之所以有效,是因为只有一个类可以处理。



README.md

PLUNKER

关于javascript - 为什么bxSlider破坏了我在上一张和第一张幻灯片之间的过渡?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36637125/

10-12 12:25
查看更多