We may have to rely on JavaScript sometimes to perform the animation because of browser compatibility issues with CSS animations/transitions. As you know, the moment we introduce ngAnimate as a dependency to our application, the $animate service starts adding/removing the ng-* classes on/off the elements during the course of the animation, but within 0 ms, in case we do not have the CSS animations in place. This gives us a control over how we want to enable the animation, that is, either using CSS or JavaScript.
Let's create a JavaScript fallback for the example from the Using animate.css section. Add the following to controllers.js:
.animation('.item', function() {
return {
enter: function(element, done) {
element.css({'opacity': 0, 'margin-left': '-230px'});
element.animate({'opacity': 1, 'margin-left': 0}, 500, done);
},
leave: function(element, className, done) {element.animate({'opacity': 0, 'margin-left...