Javascript VueJS中的转盘式幻灯片过渡

我试图创建一个基本上是旋转木马的组件：当用户左右滑动时，一系列完整的页面div滑入和滑出视图

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

（我意识到不管滑动方向如何，都会发生向左滑动的情况。这是我稍后可以解决的一个细节。）

转盘组件：

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

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

从“/SliderPane”导入SliderPane；
导出默认值{
名称：“滑块”，
组成部分：{
滑石烷
},
道具：{
窗格：{
类型：数组，
必填项：true
}
},
数据（）{
返回{
当前窗格：1
};
},
方法：{
onSwipe（事件）{
const lastPane=this.panes.length；
如果（event.deltaX<0&&this.currentPane0&&this.currentPane>0）{//向左滑动，则为else。
此.currentPane--；
}
//如果在第一个/最后一个窗格中，则不执行任何操作。
}
}
};
.滑动保持活动状态，
.滑入激活状态{
过渡：0.5s；
}
.滑入{
转换：转换（100%，0）；
}
.滑动保持活动状态{
转换：转换（-100%，0）；
}
滑动
{
显示器：flex；
溢出：隐藏；
身高：100%；
}

SliderPane.vue：

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

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

导出默认值{
名称：'滑块'，
道具：{
索引：{
类型：数字，
必填项：true
}
}
};
分区滑块容器
{
身高：100%；
最小宽度：100%；
保证金：0；
显示器：flex；
弯曲方向：立柱；
对齐项目：拉伸；
}

你有没有想过这一点？愿意分享你的见解吗？@PrintlnParams-Nope。这是一个工作申请项目，我最终提交了它。不用说，我没有得到这份工作。。。