Слишком медленная замена стиля перехода для бесконечной карусели изображений - PullRequest
Новая
       20

Слишком медленная замена стиля перехода для бесконечной карусели изображений

0 голосов
/ 07 февраля 2020

Я работаю над бесконечной каруселью изображений / компонентов.

У меня есть такой шаблон: 

<template>
    <div class="simple-carousel-wrapper">
        <div ref="slides-container" 
            v-if="items.length" class="simple-carousel-container" 
            :style="[slidesContainerStyle, useTransition ? slidesContainerStyleTransition : slidesContainerStyleTransitionNone]"
        >
            <div v-if="items.length > 1" class="slide">
                <component :is="items[items.length-1].component" :item="items[items.length-1]"></component>
            </div>
            <div v-for="(item, index) in items" v-bind:key="item.id" class="slide">
                <component :is="item.component" :item="item"></component>
            </div>
            <div v-if="items.length > 1" class="slide">
                <component :is="items[0].component" :item="items[0]"></component>
            </div>
        </div>
    </div>
</template>

Мои вычисленные свойства для использования шаблона: 

computed: {
    slidesContainerStyle: function(){
        var translateX = -1 * this.tempIndex * 100 + '%';

        var style = {
            transform: 'translate(' + translateX + ')',
        };

        return style;
    },

    slidesContainerStyleTransition: function(){
        var style = {
            transition: 'transform ' + this.transitionDuration + 'ms ease-in',
        };

        return style;
    },

    slidesContainerStyleTransitionNone: function(){
        var style = {
            transition: 'transform 0s',
        };

        return style;
    },

    itemsCount: function(){
        return this.items.length;
    },
},

Предположим, у нас есть 3 элемента / изображения в карусели. Чтобы сделать карусель бесконечной, я помещаю последнее изображение перед l oop, а первое изображение в конце l oop. Когда мы найдем последнее изображение и попытаемся перетащить его вперед, мы go перейдем к следующему (первому клонированному) изображению. Когда анимация закончена (this.transitionDuration - время анимации), я заменяю клонированное первое изображение реальным первым изображением, переводя его на первое реальное изображение (не клонированное). Я делаю это с помощью этого кода: 

setTimeout(() => {
    this.useTransition = false; // this remove transition (transition: 'transform 0s',) from translateX I could set firs or last image without scrolling carousel.

    this.tempIndex = index + 1; // force replacing of my cloned first/last image to real first/last image;

    /*
    this.$nextTick(() => {
        this.useTransition = true;
    });
    */

    setTimeout(() => {
        this.useTransition = true; //move back transition for translateX style

    }, 50);     

    /*
    this.tempIndex = index + 1;

    this.useTransition = true;
    */

}, this.transitionDuration);

Он работает нормально, но, как вы можете видеть, я использую это: 

setTimeout(() => {
    this.useTransition = true;

}, 50);

, что не гарантирует, что переход будет иметь время для замены. Когда я использую только это: 

this.useTransition = false;

this.tempIndex = index + 1;

this.useTransition = true;

переход translateX не заменяется на transition: 'transform 0s',. Если я удаляю последнюю строку, переход заменяется на transition: 'transform 0s', успешно.

Вопрос в том, как правильно заменить мою setTimeout функцию с задержкой 50 мс?

...