Using css3 transitions instead of jQuery animate

Question

I'm animating a block of html that fades in (opacity) and moves slightly from the left (margin-left)...

$('.latest-stats').delay(1000).animate({ opacity: 1, marginLeft: '55px' }, 1000, function () {
  ...code in here
}

.latest-stats {
   position:absolute;
   top:250px;
   opacity:0;
   margin-left:40px;
}

There is a delay and I need to perform some functions within that block of HTML after the transiiton has finished. Can this be done in css, maybe by adding a class that has the transitions upon it?

Amin Jafari · Accepted Answer · 2014-10-01 09:13:55Z

1

The Added CSS Class:

.transitioned {
   opacity:1;
   margin-left:55px;
   transition:all 1s;
   -ms-transition:all 1s;
   -moz-transition:all 1s;
   -o-transition:all 1s;
   -webkit-transition:all 1s;
}

The jQuery: (UPDATED)

setTimeout(function(){
    $('.latest-stats').addClass('transitioned');
    setTimeout(function(){
        //your code here
    },1000);
},1000);

but I just have to ask, is there a specific reason you wanna do this? I mean what's wrong with the jQuery animate?

edited Oct 1, 2014 at 9:13

answered Oct 1, 2014 at 8:58

Amin Jafari

7,2153 gold badges21 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Rob Morris Over a year ago

Nothing particularly wrong, the animation isn't as smooth as I would have liked, wanted to see if the css transition would be smoother.

Dre Over a year ago

Separation of concerns would be a very good reason to do this, provided there are fallbacks for browsers that don't support CSS transitions. I'd also suggest using translate rather than animating the left margin, as it's typically smoother. Note that translate isn't as widely supported as you'd probably like, but coverage is pretty good.

Amin Jafari Over a year ago

if you have a lot of animations in your page and you want smooth transition then take a look at GSAP => greensock.com/gsap

Rob Morris Over a year ago

Just tried and the above doesn't seem to be firing any code after the class has been added, e.g. if I try to alert something to the screen? I didn't think there was a callback on an addClass?

Amin Jafari Over a year ago

check the updated jQuery code, I forgot to mention that the previous code needs jQuery UI library because addClass doesn't have a callback by default

|

Dre · Accepted Answer · 2014-10-01 15:34:49Z

We rejig the JS to just add the class rather than the any styles:

setTimeout(function(){
    $('.latest-stats').toggleClass('transitioned').each(function () {
        // Call back functions here
    });
}, 1000);

I use setTimeout() since delay() only works for animations. I use each() to add my callback function, since toggleClass() doesn't have a callback, and this way I don't need to load an extra library.

Then the CSS handles the changes to the styles, keeping all the visual aspects in one location:

.latest-stats { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; position:absolute; opacity:0; margin-left:40px; padding: 30px; background:red; margin:40px; } .latest-stats.transitioned { opacity:1; -webkit-transform:translate(55px, 0); -moz-transform:translate(55px, 0); transform:translate(55px, 0); } Note I'm using translate to shift the element rather than margin-left as the browser doesn't have to change the layout or perform a repaint on the element, which can improve the animation. However, check for browser support and provide fallbacks when necessary/appropriate.

Here's a JSFiddle.

Collectives™ on Stack Overflow

Using css3 transitions instead of jQuery animate

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related