1

次のボタンをクリックしたときにアニメーション化するカルーセルの親要素にCSStransitionを適用しましたが、変換位置をsetTimeout 内にリセットしたときにアニメーションが開始されないようにする必要があります。理想的には、トランジションを none に設定し、カルーセルがリセットされたらすぐにこれを削除したいと考えています。誰も私がこれを行う方法を推奨できますか?translateX0 to 100%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/

4

2 に答える 2

2

2 番目の CSS クラス「animated」を使用できます。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 に答える