AngularJS 1.2 Animation when no-cssanimations support is supported

Question

I use the new AngularJS 1.2 approach ( year of the moo article ) for animations using CSS3 transitions. I would like to conditionally apply jQuery fallback animation if the browser does not support CSS animation.

• My CSS animations work fine when using only CSS ng-enter, ng-enter-active, etc.
• My jQuery animations work fine when using app.animations ("...") as shown below.
• I use Modernizr, so the .no-cssanimations class is already applied to my html document.
• I would like to conditionally apply jQuery animations when CSS animations are not supported for browsers like IE9.

Right now I am trying to do this 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) { ... } } }); 

This does not work. Is there a better way to do this?

Thanks...

UPDATE

I was not able to determine the selector approach above - but it works for me, conditionally calling app.animation (), testing the Modernizr object in javascript. I did not understand that you can test like that.

 if (Modernizr.canvas) { ... } 

Thanks again for the help.

Answer 1

You cannot use a complex selector like this in your animation () factory method. You can use only one CSS class name per level. Instead, make your factory animated method conditional based on your browser's capabilities, using $ sniffer to determine if you have transitions.

 //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 the done () call in the JS animation code. Also upgrade to 1.2.5.