Question

我已将transition应用于translateX我的轮播的父元素，我在点击下一个按钮时从0 to 100%动画，但我想要做的是阻止动画在我的setTimeout中将翻译位置重置回0时踢。理想情况下，我想将转换设置为none，然后在我的轮播重置时快速删除它。任何人都可以推荐我这样做吗？

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中，您可以添加或删除此额外的类，以添加或删除动画。

Answer 2

好的，所以我觉得我按照你的意愿运作了。

我所做的主要更改是将-webkit-transition: all .1s ease-in-out;添加到.expose-*类，并将延迟添加到$('.carousel').attr('style', '');

结束 this Fiddle

重置位置时如何防止旋转木马容器过渡？

2 个答案: