With all these examples, no attempt has been made to hack around browsers with no support, other than adding the opacity filter in IE where appropriate. This ends up as two lines, as they changed it to a different incorrect syntax between versions 7 and 8.

In most cases, the transition happens, but with no animation - you see the beginning and end frames but nothing in between. Depending on the site, this may or may not be acceptable. Modernizr provides a nice feature detection library, allowing you to easily add different CSS/JS for legacy browsers.

The best way to do this in practice is to include Modernizr, then to use some javascript such as:

// We might as well bind to all the events, they just won't fire in the other browers.
var speed = 500,
  transitionEndEvents = 'webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd transitionend';

function animate(object, cssProperties, callback, ms) {
  if (!ms) {
    ms = speed;
  }

  if (Modernizr.csstransitions) {
    // jQuery 1.8+ deals with vendor prefixes for you.
    object.css("transition", "all "+ms+"ms ease-in-out");

    object.css(cssProperties);

    if ($.isFunction(callback)) {

      object.bind(transitionEndEvents,function(){
        object.unbind(transitionEndEvents);
        callback();
      });

    }

  } else {
    if ($.isFunction(callback)) {
      object.animate(cssProperties, ms, callback);
    } else {
      object.animate(cssProperties, ms);
    }
  }
}

You can then use javascript to animate something and know that in modern browsers it will use a transition, while in older ones you get the jQuery animation. On the iPhone and iPad particularly this approach gets you much higher frame rates than just using the jQuery animate method.

If you are using simple properties, you can call it like this:

  animate($("#someID"),{"left":"100px"});

For things where the property to be changed has the vendor prefix concatenated to it, use:

var cssArgs = {};
cssArgs[vP+"transform"] = "translate(100px,0px)";

animate($("#someID"),cssArgs);

If you are better at JS than me and can think of a way to make this less clumsy, please let me know!

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

blog comments powered by Disqus

avenue-origin