Как временно отключить переход CSS для карусели? - PullRequest
Новая
       5

Как временно отключить переход CSS для карусели?

1 голос
/ 16 февраля 2020

У меня есть карусель HTML / CSS / JS со следующей разметкой c: 

<div class="carousel">
    <ul>
        <li><img src="img1.png"></li>
        <li><img src="img2.png"></li>
        <li><img src="img3.png"></li>
        <li><img src="img1.png"></li>
    </ul>
</div>

и следующей базой c CSS: 

.carousel {
    overflow: hidden;
    white-space: nowrap;

    ul {
        left: 0;
        position: relative;
        transition: left 1s;

        li {
            display: inline-block;

            img {
                width: 100%;
            }
        }
    }
}

Я настроил JS так, чтобы каждые 3 секунды я изменял свойство left тега ul, добавляя к нему отрицательное количество пикселей, равное ширине карусели, чтобы он создавал Эффект перехода карусели от скольжения одного изображения к другому.

Проблема, с которой я столкнулся, связана с тем, что происходит, когда карусель достигает конца. Я добавил в конец вторую копию img1.png, и когда она туда доберется, я хочу установить смещение left обратно на 0, чтобы оно началось снова и l oop навсегда.

Проблема, в частности, заключается в том, что когда свойство left имеет значение, например, -1000px, а я изменяю его на 0, карусель внезапно анимируется вплоть до первого изображения. Я хочу установить для свойства left значение 0 без анимации перехода.

Я подумал, что если временно установить для свойства transition значение none, то установить left на 0, а затем установите transition обратно на left 1s, тогда это будет работать, но это не так. Он по-прежнему анимируется с конца до самого начала, когда я устанавливаю left в 0.

Как добиться желаемого эффекта с помощью переходов CSS и свойства left, или подход, который я использую, в корне неверен и нуждается в переосмыслении? Спасибо.

1 Ответ

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

duhaime дал отличное предложение просто иметь два изображения карусели за раз и всегда менять местами пути изображений.

Однако у меня все еще была проблема со свойством transition, анимирующим вещи, когда я установите left: 0 на go назад к началу. По сути, это то, что я имел и надеялся, сработает: 

// ulElem is equal to the ul element with the following CSS:
// ul {
//     left: 0;
//     position: relative;
//     transition: left 0.5s;
// }

ulElem.style.transition = 'none';
ulElem.style.left = '0';
ulElem.style.transition = 'left 0.5s';

Однако это создавало проблему, которую я видел. Поскольку я использую Vue. js, я подумал, что помещение некоторого кода в вызов this.$nextTick может помочь. Поэтому я изменил это на следующее: 

ulElem.style.transition = 'none';
ulElem.style.left = '0';

this.$nextTick(() => {
    ulElem.style.transition = 'left 0.5s';
});

Однако это все равно не сработало. Тем не менее, следовало сделать следующее: 

ulElem.style.transition = 'none';
ulElem.style.left = '0';

setTimeout(() => {
    ulElem.style.transition = 'left 0.5s';
}, 0);

Ранее я уже читал о том, как установить setTimeout время 0 мс и как это помещает его в конец стека вызовов, что может помочь. Мне кажется странным, но это работает.

Для всех, у кого есть подобная проблема, это может быть вашим решением. Я не совсем уверен, почему $nextTick не сработал, но я недостаточно знаком с внутренней работой Vue. js, чтобы комментировать. Все равно setTimeout с настройкой 0 мс сработало. Спасибо.

...