SO36637125

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，它是一个非常灵活但又不失气质的插件。我相信回调太多了。每个滑块都在同时删除并添加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类。
- 这是有效的，因为只有一个类可以处理。

为什么bxSlider打破了我在上一张和第一张幻灯片之间的过渡？

1 个答案:

SO36637125

为什么bxslider会破坏我在上一张幻灯片和第一张幻灯片之间的转换？

README.md

PLUNKER