javascript - 重置位置时如何防止轮播容器上的过渡？

Question

我已将 CSS transition 应用于轮播的父元素上的 translateX，单击下一个时，我将其设置为 0 到 100% 的动画按钮，但是我想做的是当我在 setTimeout 中将翻译位置重置回 0 时阻止动画启动。理想情况下，我想将过渡设置为无，然后在轮播重置后快速将其删除。谁能推荐我该怎么做？

CSS

.carousel {
    height: 100%;
    -webkit-transition: -webkit-transform .1s ease-in-out;
    -webkit-transform: translate(0, 0);
}

JS

btnNext.on('click', function (e) {
        e.preventDefault();

        //move carousel to right 100%
        carousel.css('transform', 'translateX(-100%)');

        $('.slide:first').insertAfter('.slide:last');

        setTimeout(function () {
            resetSlides();

            resetCarousel();
        }, 5000);

    });

function resetCarousel() {
        $('.carousel').css({
            'transform': 'translateX(0%)',
            'transition': 'none'
        });

        //now remove inline transition:none style without a transition occurring?
    }

JSFiddle:http://jsfiddle.net/GKv4p/22/

Answer 1

您可以使用第二个 CSS 类“动画”。在你的 CSS 中你可以有:

.carousel {
    height: 100%;
}

.carousel.animated {
    -webkit-transition: -webkit-transform .1s ease-in-out;
    -webkit-transform: translate(0, 0);
}

然后在您的 JavaScript 中您将添加或删除这个额外的类以添加或删除动画。