javascript - VueJS 中的轮播式幻灯片过渡

Question

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

我……有点像。当我滑动时，旧视图会根据需要滑出。但是，新视图不会同时滑入：它只是在上一个转换完成后出现。Vue 进入/离开转换同时发生，所以我可能做错了什么。

（我意识到无论滑动方向如何都会向左滑动。这是我稍后可以解决的细节，希望使用这个 SO 答案。）

轮播组件：

<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>

标签： javascriptcssvue.jscss-transitions