如何暂时禁用轮播的 CSS 过渡？

Question

I have an HTML/CSS/JS carousel with the following basic markup:

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

And the following basic CSS:

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

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

        li {
            display: inline-block;

            img {
                width: 100%;
            }
        }
    }
}

I have the JS set up so that every 3 seconds, I change the left property of the ul tag by adding a negative amount of pixels to it equal to the width of the carousel so that it creates the carousel transition effect of sliding from one image to the next.

The problem I'm having though is related to what happens when the carousel reaches the end. I added a second copy of img1.png on the end, and when it gets there, I want to set the left offset back to 0 so that it'll start all over again and loop forever.

The issue specifically is that when the left property is, for example, -1000px and I change it to 0 , the carousel suddenly animates all the way back to the first image. I want to set the left property to 0 without the transition animation taking place.

I thought that if I temporary set the transition property to none , then set left to 0 , and then set the transition back to left 1s , then it would work, but it doesn't. It still animates from the end all the way back to the beginning when I set left to 0 .

How can I achieve the effect I want with CSS transitions and the left property, or is the approach I'm taking fundamentally wrong and need to be completely rethought? Thank you.

Answer 1

duhaime gave a great suggestion to just have two carousel images at a time and always be swapping out the image paths.

However, I was still having an issue with the transition property animating things when I set left: 0 to go back to the start. In essence, this is originally what I had and hoped would work:

// 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';

However, that was creating the problem I was seeing. Since I'm using Vue.js, I thought that putting some of the code within a this.$nextTick call might do the trick. So I changed it to the following:

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

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

However, that still didn't work. However, the following did:

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

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

I've read stuff before about setting a setTimeout time of 0 ms and how that places it on the end of the call stack, which can help. Seems weird to me, but it works.

For anyone else that has a similar problem, this may be your solution. I'm not entirely sure why $nextTick didn't work, but I'm not familiar enough with the inner-workings of Vue.js to comment. All the same, setTimeout with a 0 ms setting worked. Thanks.