VueJS中的轮播样式幻灯片过渡

Question

我正在尝试创建一个基本上是轮播的组件：一系列全页div，当用户向左和向右滑动时，它们会在视图中滑动和滑动。

我...在那里。滑动时，旧视图会根据需要滑出。但是，新视图不会同时滑入：它只是在上一次转换完成后出现。 Vue的输入/离开转换是同时发生的，所以我可能做错了。

（我意识到无论滑动方向如何，都会发生向左滑动的情况。hopefully using this SO answer这是我稍后可以解决的细节。）

轮播组件：

<template>
    <div class="slide" v-hammer:swipe.horizontal="onSwipe">
        <transition name="slide">
            <SliderPane v-for="pane in panes"
                :key="pane.position"
                v-if="pane.position === currentPane"
            />
        </transition>
    </div>
</template>

<script>
import SliderPane from './SliderPane';

export default {
    name: 'Slider',
    components: {
        SliderPane
    },
    props: {
        panes: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            currentPane: 1
        };
    },
    methods: {
        onSwipe(event) {
            const lastPane = this.panes.length;

            if (event.deltaX < 0 && this.currentPane < lastPane) { // Swipe right.
                this.currentPane++;
            }
            else if (event.deltaX > 0 && this.currentPane > 0) { // Swipe left.
                this.currentPane--;
            }

            // Do nothing if on first/last panes.
        }
    }
};
</script>

<style lang="scss">

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

.slide-leave-active {
    transform: translate(-100%, 0);
}
    .slide
    {
        display: flex;
        overflow: hidden;
        height: 100%;
    }
</style>

SliderPane.vue ：

<template>
    <div class="sliderPaneContainer">
    </div>
</template>

<script>
export default {
    name: 'SliderPane',
    props: {
        index: {
            type: Number,
            required: true
        }
    }
};
</script>

<style lang="scss">
    div.sliderPaneContainer
    {
        height: 100%;
        min-width: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
</style>