how to make slide transition smoother and not instant on swiper update - Swiper API

I'm using Swiper API to create a mobile-friendly slider but I need to find a way to make the swiper.update() method reposition the slides smoothly and not instantly placing them upon removing a slide.

Right now when removing a slide and calling swiper.update to reposition the remaining slides, it just reposition the remaining slides instantly. How can I make it run the same way but with a smoother reposition of the slides?

Link for Swiper API: https://swiperjs.com/swiper-api

Initialization of Swiper

swiper = new Swiper(".mySwiper", {
    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,
    },
});

swiper.setTransition(this, 0.3);

EDIT: As requested I created an example code to run and reproduce the issue. As you can see with the code provided below when you remove a slide the transition that repositions the remaining slides is instant. I need to find a way to make it smoother. To position the remaining slides slower and not instantly. Is there a way to do that?

<!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;
                /* Center slide text vertically */
                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;
                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">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <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>
            <!-- If we need pagination -->
            <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,
            },
        });

        swiper.setTransition(this, 300);

        function RemoveSlide() {
            var slide = Math.floor(Math.random() * swiper.slides.length);
            swiper.removeSlide(slide);
        }
    </script>
</html>

Solution

Turns out, it could be achieved without using any of the API's methods and properties. The way the swiper is displaying the slides is by using flex display. So I managed to achieve a smooth transition upon removing slides by using the following jsfiddle code.

Link for JsFiddle: https://jsfiddle.net/MadLittleMods/EM4xL/

<style>
.remove-item {
    flex: 1;
    -webkit-animation: flexShrink 500ms ease forwards;
    -o-animation: flexShrink 500ms ease forwards;
    animation: flexShrink 500ms ease forwards;
}

@keyframes flexShrink {
    to {
        flex: .01;
        flex: .00001;
    }
}

@keyframes flexGrow {
    to {
        flex: 1;
    }
}
</style>

<script>
    swiper.slides[i].classList.add('remove-item');                                    
    swiper.slides[i].addEventListener('animationend', function () {
        swiper.removeSlide(i);
    });
</script>