Question

我想创建自己的简单刷卡器。我有一系列元素，我想滑动它们（下一个，上一个）。下一个元素应该从右向左变换，上一个元素应该从左向右变换元素。我创建了一个组件，但是我不知道下一步该怎么做。

<template>
    <div class="swiper">
        <transition-group tag="div" name="slide" class="slide">
            <div v-for="(element, index) in data" :key="index">
                <slot v-if="index === currentIndex" v-bind:element="current" />
            </div>
        </transition-group>
        <div class="pagination">
            <button @click="next">next</button>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        data: {
            type: Array,
            default: []
        },
        currentIndex: {
            type: Number,
            default: 0
        }
    },
    computed: {
        current() {
            return this.data[this.currentIndex];
        }
    },
    methods: {
        next() {
            setTimeout(() => this.currentIndex++, 2000);
        }
    }
}
</script>
<style lang="scss" scoped>
.swiper {
    .slide {
        overflow: hidden;
        position: relative;
    }
}

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

Answer 1

默认情况下，过渡仅在创建或删除类时触发。如果您想在班级已经存在时触发转换，请阅读此内容 Vue.js call transition explicitly

基于转换的Vue滑动器

1 个答案: