Swiper滑块过渡错误答案

【问题标题】：Swiper slider transition bugSwiper滑块过渡错误
【发布时间】：2019-07-20 13:49:40
【问题描述】：

我正在尝试使用 vueawesome 滑块（基于 swiper 滑块）制作滑块。我试图让它看起来像this

但是由于某种原因，当滑动器从 first 元素移动到 second 元素时，当它经过 first 时，动画不起作用循环。

过渡不是无缝的，它只是瞬间的。如果我删除所有自定义转换的东西并让它使用正常的 300 毫秒它工作正常。我完全不知道如何让它工作，我什至尝试过使用coverflow效果但无济于事。我也尝试将动画放在内部容器而不是幻灯片元素本身上，但由于某种原因，这也不起作用。

模板：

<swiper :options="swiperOption" ref="mySwiper">

    <!-- slides -->
    <swiper-slide class="swiper-1">
        <div class="inner">
            HELLOW 1
        </div>
    </swiper-slide>

    <swiper-slide>
        <div class="inner">
            HELLOW 2
        </div>
    </swiper-slide>

    <swiper-slide>
        <div class="inner">
            HELLOW 3
        </div>
    </swiper-slide>

    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
</swiper>

滑动选项：

swiperOption: {
            loop: true,
            grabCursor: false,
            slidesPerView:'auto',
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
}

当前样式：

 .swiper-container {
    width: 100%;
    height: calc(100vh - 66px);
    padding-top: 100px;
    padding-bottom: 100px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width:80% !important;
    transform: scale(.8) !important;
    transition: all 1500ms cubic-bezier(.85,1.54,.97,1.07) !important; 
}
.swiper-slide.swiper-slide-active{
    transform: scale(1) !important;
}
.swiper-slide .inner{
    background:blue;
    width:100%;
    height:100%;
}

谁知道如何解决我的问题？

编辑当我尝试拖动滑动条以转到下一个滑块时，在第一张幻灯片上播放过渡两次时出现问题。

现场演示：here (scroll down passed the header)

先谢谢了~

【问题讨论】：

嗨！你解决了吗？我有同样的问题。当循环再次开始时，当我滑动到第二张幻灯片时，第一张幻灯片不会进行过渡。我认为与重复的幻灯片有关，但我不知道如何解决。

标签： javascript css vue.js carousel

【解决方案1】：

我刚才遇到了同样的问题。经过一番研究，我发现这个solution 可以解决我的问题。您还必须将 CSS 效果应用于活动的复制幻灯片。

所以这可能会解决你的问题：

.swiper-slide.swiper-slide-active,
.swiper-slide.swiper-slide-duplicate-active{
      transform: scale(1) !important;
}

【讨论】：