滑动滑块过渡错误

Question

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

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

过渡不是无缝的，而是即时的。如果我删除所有自定义过渡内容并让它使用正常的 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%;
}

有人知道如何解决我的问题吗？

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

现场演示：此处（向下滚动通过标题）

先谢谢你了~

Answer 1

我刚才也遇到了同样的问题。经过一番研究，我找到了这个解决方案来解决我的问题。您还必须将 CSS 效果应用到活动的重复幻灯片。

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

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

Answer 2

我在滑动器初始化中定义了

cssMode

，当我删除它时 - 动画返回。