AngularJS 1.2 Animation fallback when no-cssanimations supported

Question

I\'m using the new AngularJS 1.2 approach (year of moo article) for animations using CSS3 transitions. I\'d like to conditionally apply a fallback jQuery animation if the browse

Answer 1

You can't use a complex selector like that in your animation() factory method. You can only use a single CSS class name for one level. Instead make your animation factory method conditional based on the browser's capabilities by using $sniffer to detect if you have the transitions there or not.

//you can make this an EMPTY string if you want this animation to apply to ALL
//possible elements...
app.animation('.slideup-form', function($sniffer) {
  if(!$sniffer.transitions) {
    //this object will conditionally be added if the browser doesn't support
    //native CSS3 animations
    return {
      enter             : function(element, done) {},
      leave             : function(element, done) {},
      move              : function(element, done) {},
      beforeAddClass    : function(element, className, done) {},
      addClass          : function(element, className, done) {},
      beforeRemoveClass : function(element, className, done) {},
      removeClass       : function(element, className, done) {}
    }
  }
});

Just remember to call done() in your JS animation code. Also upgrade to 1.2.5.