jquery - .animate（）の代わりにcss3トランジション

Question

css3トランジションを使用してjQueryで.animate（）を使用する代わりに方法はありますか？

したがって、このコードの代わりに

jQuery('#pageHolder').stop().animate({
            left: 950

}, 400, function() {
            calcNav(pageSize);
            calcPage(pageSize);
});

cssトランジションでこれを行うことができますか？

Answer 1

試す

#pageHolder{
    -webkit-transition:left 0.4s;
    -moz-transition:left 0.4s;
    -o-transition:left 0.4s;
    transition:left 0.4s;
}

トランジション終了イベントにハンドラーをアタッチします

jQuery('#pageHolder').on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', 
    function(){
        calcNav(pageSize);
        calcPage(pageSize);
    }
);

cssプロパティを変更して、イベントをトリガーします

jQuery('#pageHolder').css({left: 950});