AngularJS 1.2 Animation fallback when no-cssanimations supported

All we need is an easy explanation of the problem, so here it is.

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 browser doesn’t support CSS animations.

  • My CSS animations are working fine when only using CSS ng-enter, ng-enter-active, etc.
  • My jQuery animations are working fine when using app.animations(“…”) as shown below
  • I’m using Modernizr so the .no-cssanimations class is already applied to my html document.
  • I’d like to conditionally apply the jQuery animation when CSS animations aren’t supported for browsers such as IE9.

Right now, I’m trying to do it through the class selector “.no-cssanimations .slideup-form” like this…

//Simplified angular animation example
app.animation("**.no-cssanimations .slideup-form**", function () {
     return {
          enter: function (element, done) { ... },
          leave: function (element, done) { ... }
          }
});

That’s not working. Is there a better way to accomplish this?

Thanks…

UPDATE:

I wasn’t able to figure out the selector approach above – but I have it working by conditionally calling app.animation() by testing the Modernizr object in javascript. I didn’t realize you could test like this.

if (Modernizr.canvas) { ... }

Thanks again for the help.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply