在幻灯片上修复动画图像

Question

我正在尝试在更改幻灯片时制作动画。旧幻灯片随动画消失，而新幻灯片随动画出现。我的动画是交替的。救命。谢谢大家！

 var app = new Vue({
        el: '#app',
        data() {
            return {
                selectedIndex: 0,
                message: "Test work vue",
                isOpenSlide: true,
                startVal: 0,
                decimals: 0,
                duration: 2.5,
                options: {
                    useEasing: true,
                    useGrouping: true,
                    separator: ',',
                    decimal: '.',
                    prefix: '',
                    suffix: ''
                },
                items: [
                    {
                        title: 'Center of osteopatia and rehabilitation',
                        url_img: 'https://i.imgur.com/gQp3VSW.jpg',
                        info_block: [
                            {
                                incremental: '800',
                                description: 'Increasing the number of transactions from organic search results'
                            },
                            {
                                incremental: '240',
                                description: 'Raising your revenue'
                            }

                        ]
                    },
                    {
                        title: 'SLide 2',
                        url_img: 'https://newevolutiondesigns.com/images/freebies/space-wallpaper-5.jpg',
                        info_block: [
                            {
                                incremental: '140',
                                description: 'Increasing the numb organic search results'
                            },
                            {
                                incremental: '790',
                                description: 'Raising your revenue'
                            }

                        ]
                    },
                    {
                        title: ' SLIDE 3',
                        url_img: 'https://www.planwallpaper.com/static/images/4433836-space-wallpapers.jpg',
                        info_block: [
                            {
                                incremental: '110',
                                description: 'Increasing the number of trans'
                            },
                            {
                                incremental: '99',
                                description: 'Raising your revenue'
                            }

                        ]
                    }
                ]
            }
        },
        methods: {

            select(index) {
                this.selectedIndex = index
            },
            index_dotnav: function (index) {
                this.selectedIndex = index
            },

            open() {
                this.isOpenSlide = true;
            },
            close() {
                this.isOpenSlide = false;
            },

            toggle() {
                if (this.isOpenSlide) {
                    this.close();
                } else {
                    this.open();
                }
            },

            ChangeSlider() {
                setTimeout(() => {

                    if (++this.selectedIndex === this.items.length) {
                    this.selectedIndex = 0;
                }
                this.toggle();
                this.ChangeSlider()

            }, 5000)
            },

            callback(instance) {
                instance.start();
            }

        },
        mounted() {
            this.ChangeSlider();
        }


    })

    .slide-leave-active,
    .slide-enter-active {
        transition: 1s;
    }
    .slide-enter {
        transform: translate(100%, 0);
    }
    .slide-leave-to {
        transform: translate(-100%, 0);
    }



    ul {
        padding-left: 0;
        margin: 0;
    }

    .img-block,
    section > *,
    .uk-slideshow,
    .uk-slideshow > ul {
        height: 100vh !important;
    }

    .information-slide .uk-container {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
    }

    .slideshow > div.dotnav-block {
        top: 50%;
        left: 95%;

        z-index: 2;
    }

    .slideshow > div.dotnav-block li a {
        background: #fff;
    }

    .slideshow > div.dotnav-block li.active a {
        width: 13px;
        height: 13px;
    }

    .slideshow > div.dotnav-block ul {
        align-items: center;
    }

    .slideshow .slideshow-items > li {
        display: none;
    }

    .slideshow .slideshow-items > li.active {
        display: block;
        position: relative;
    }

    .slideshow .slideshow-items > li img {
        height: 100%;
        width: auto;
        object-fit: cover;
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.14/css/uikit.min.css"/>
<body>
<div id="app">
    <section>
        <div class="uk-child-width-1-2" uk-grid>
            <div>
                <h1>{{ message }}</h1>

            </div>
            <div>
                <div id="slideshow">
                    <div class="slideshow">
                        <ul class="slideshow-items">
                            <li v-for="(item,index) in items" :class="{'active':index===selectedIndex}"
                                v-on:click="select(index)">
                                <div class="information-slide">

                                    <transition name="slide">
                                        <div class="img-block" v-show="isOpenSlide">
                                            <img v-bind:src="item.url_img" alt="">
                                        </div>
                                    </transition>
                                    <div class="uk-container">
                                        <div class="title title-1">{{item.title}}</div>

                                        <div class="info-block">
                                            <div class="info" v-for="(iblock,ind) in item.info_block">
                                                <div class="incremental">
                                                    <span>+</span>
                                                    <!--<app-count-up-->
                                                    <!--:startVal="startVal"-->
                                                    <!--:endVal="iblock.incremental"-->
                                                    <!--:decimals="decimals"-->
                                                    <!--:duration="duration"-->
                                                    <!--:options="options"-->
                                                    <!--:callback="onReady"></app-count-up>-->
                                                    <span>%</span>
                                                </div>
                                                <div class="description descr-1">{{iblock.description}}</div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </li>
                        </ul>

                        <div class="dotnav-block uk-position-bottom-center uk-position-small">
                            <ul class="uk-dotnav uk-dotnav-vertical">
                                <li :class="{'active':index===selectedIndex}" v-for="(item,index) in items"
                                    v-on:click="index_dotnav(index)">
                                    <a href="#">Item {{index}}</a></li>

                            </ul>
                        </div>

                    </div>
                </div>

                </template>

            </div>

        </div>
    </section>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.14/js/uikit.min.js"></script>