CODEWITHSUNDEEP
jquerycsscss-transitions
Dan
Dan

Reputation: 1295

css3 transition instead of .animate()

is there a way of instead of using .animate() in jQuery using a css3 transition?

so instead of this code 

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

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

can and how would i do this with css transition?

Upvotes: 0

Views: 192

Answers (1)

Musa
Musa

Reputation: 97672

Try

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

Attach handlers to the transition end event

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

Change the css property to trigger the event

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

Upvotes: 1

Related Questions