jquery - css3 过渡而不是 .animate()

Question

有没有办法在 jQuery 中使用 css3 转换来代替 .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});