Screencast: When jQuery and CSS3 Collide

Article and screencast from Louis LazarisjQueryTO presentation:

tl;dr (er, tl;dw?):

  • Ideally don’t use jQuery’s animate or css functions, instead write those transitions in your CSS files, then use jQuery to change CSS classes to apply your transitions, like:
    #logo { height: 100px; transition: height 1s; } { height: 300px; }
  • Lou recommends using Modernizr.prefixed() to prevent having to identify the proper vendor prefixes, makes sense.
  • You can also use jQuery to add a transitionEnd function, if you need one, like:
    $('#logo').one('transitionEnd', function(e) {
    // do stuff here
  • I wasn’t familiar with jQuery’s one method, but there it is!
  • And did you know there was also an animationEnd event? I did not…
  • Animate.css offers pre-made CSS animations and a customizable build; I will dig into this one ASAP

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s