Swiper调用update/删除slide时如何实现平滑过渡而非瞬间跳转

问题原因 #

你遇到的无过渡跳转问题是两个错误用法导致的：

1. swiper.setTransition(this, 300)属于参数调用错误，该方法第一个入参为过渡时长（单位毫秒），不需要传入this，该写法导致你设置的过渡时长根本没有生效。
2. Swiper内置的removeSlide方法执行完成后，内部调用的update逻辑会直接重置滑块容器的位移属性，默认不会触发过渡动画。

解决方法 #

修改删除滑块的逻辑，主动给滑块容器添加过渡规则，删除完成后手动对齐当前显示位置即可，修改后的RemoveSlide函数代码如下：

function RemoveSlide() {
    // 记录当前处于激活状态的滑块索引
    const activeIndex = swiper.activeIndex;
    // 生成待删除的随机滑块索引
    const removeIndex = Math.floor(Math.random() * swiper.slides.length);
    // 给滑块容器主动添加平移过渡规则
    swiper.$wrapperEl.css({transition: 'transform 300ms ease'});
    // 执行删除滑块操作
    swiper.removeSlide(removeIndex);
    // 计算删除后需要对齐的目标索引：如果删的是当前激活位之前的滑块，索引要减1，避免跳位
    const targetIndex = removeIndex < activeIndex 
        ? activeIndex - 1 
        : Math.min(activeIndex, swiper.slides.length - 1);
    // 平滑滚动到目标位置
    swiper.slideTo(targetIndex, 300);
    // 过渡结束后清空自定义过渡规则，避免影响原生滑动的动画效果
    setTimeout(() => {
        swiper.$wrapperEl.css({transition: ''});
    }, 300)
}

你原有的CSS里给.swiper-slide设置的transition: 0.3s all ease可以保留，能实现滑块删除时的淡出效果，不需要额外修改。

完整可运行代码 #

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
        <style>
            html, body {
                padding: 0;
                margin: 0;
            }

            body {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }

            .swiper {
                width: 100%;
                height: 500px;
                margin-left: 10px !important;
                margin-right: 10px !important;
                box-sizing: border-box;
            }

            .swiper-slide {
                background-size: cover !important;
                border: 2px solid darkgray;
                box-sizing: border-box;
                text-align: center;
                font-size: 18px;
                background: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: 0.3s all ease;
            }

            .swiper-slide img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .removeSlideBtn {
                margin-top: 50px;
                line-height: 30px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">Slide 1</div>
              <div class="swiper-slide">Slide 2</div>
              <div class="swiper-slide">Slide 3</div>
              <div class="swiper-slide">Slide 4</div>
              <div class="swiper-slide">Slide 5</div>
              <div class="swiper-slide">Slide 6</div>
              <div class="swiper-slide">Slide 7</div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <button class="removeSlideBtn" onclick="RemoveSlide();">Remove Slide</button>
    </body>
    <script>
        var swiper = new Swiper(".swiper", {
            slidesPerView: 3,
            allowTouchMove: true,
            allowSlideNext: true,
            allowSlidePrev: true,
            spaceBetween: 5,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });

        function RemoveSlide() {
            const activeIndex = swiper.activeIndex;
            const removeIndex = Math.floor(Math.random() * swiper.slides.length);
            swiper.$wrapperEl.css({transition: 'transform 300ms ease'});
            swiper.removeSlide(removeIndex);
            const targetIndex = removeIndex < activeIndex 
                ? activeIndex - 1 
                : Math.min(activeIndex, swiper.slides.length - 1);
            swiper.slideTo(targetIndex, 300);
            setTimeout(() => {
                swiper.$wrapperEl.css({transition: ''});
            }, 300)
        }
    </script>
</html>

内容的提问来源于stack exchange，提问作者Giannis Poriazis