1

我已将 CSS 应用transition到translateX我的轮播的父元素上，0 to 100%当我单击下一步按钮时，我会从该元素开始制作动画，但是我想要做的是在我将翻译位置重置回0我的 setTimeout 内部时阻止动画开始播放。理想情况下，我想将转换设置为无，然后在我的轮播重置时快速删除它。任何人都可以推荐我将如何做到这一点？

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/

4

2 回答 2

2

您可以使用第二个 CSS 类“动画”。在您的 CSS 中，您可以拥有：

.carousel {
    height: 100%;
}

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

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

于 2013-10-23T16:23:34.620 回答
0

好的，所以我想我可以按照您的意愿进行操作。

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

结束了这个小提琴

于 2013-10-23T21:03:28.377 回答