Screencast: When jQuery and CSS3 Collide

Article and screencast from Louis LazarisjQueryTO presentation:
http://www.impressivewebs.com/jquery-toronto-slides-video/

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; }
    #logo.active { height: 300px; }
    $('#logo').addClass('active');
  • 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
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s