feat($animate): allow $animate to pass custom styles into animations

$animate now supports an optional parameter which provides CSS styling
which will be provided into the CSS-based animations as well as any
custom animation functions. Once the animation is complete then the
styles will be applied directly to the element. If no animation is
detected or the `ngAnimate` module is not active then the styles
will be applied immediately.

BREAKING CHANGE: staggering animations that use transitions will now
always block the transition from starting (via `transition: 0s none`)
up until the stagger step kicks in. The former behaviour was that the
block was removed as soon as the pending class was added. This fix
allows for styles to be applied in the pending class without causing
an animation to trigger prematurely.

Author: matsko

src/ng/animate.js

@@ -96,6 +96,12 @@ var $AnimateProvider = ['$provide', function($provide) {
       return currentDefer.promise;
     }
 
+    function applyStyles(element, styles) {
+      if (angular.isObject(styles)) {
+        element.css(styles.after || styles);
+      }
+    }
+
     /**
      *
      * @ngdoc service
@@ -130,7 +136,8 @@ var $AnimateProvider = ['$provide', function($provide) {
        *   after itself
        * @return {Promise} the animation callback promise
        */
-      enter : function(element, parent, after) {
+      enter : function(element, parent, after, styles) {
+        applyStyles(element, styles);
         after ? after.after(element)
               : parent.prepend(element);
         return asyncPromise();
@@ -146,7 +153,7 @@ var $AnimateProvider = ['$provide', function($provide) {
        * @param {DOMElement} element the element which will be removed from the DOM
        * @return {Promise} the animation callback promise
        */
-      leave : function(element) {
+      leave : function(element, styles) {
         element.remove();
         return asyncPromise();
       },
@@ -168,10 +175,10 @@ var $AnimateProvider = ['$provide', function($provide) {
        *   positioned next to
        * @return {Promise} the animation callback promise
        */
-      move : function(element, parent, after) {
+      move : function(element, parent, after, styles) {
         // Do not remove element before insert. Removing will cause data associated with the
         // element to be dropped. Insert will implicitly do the remove.
-        return this.enter(element, parent, after);
+        return this.enter(element, parent, after, styles);
       },
 
       /**
@@ -186,13 +193,14 @@ var $AnimateProvider = ['$provide', function($provide) {
        * @param {string} className the CSS class which will be added to the element
        * @return {Promise} the animation callback promise
        */
-      addClass : function(element, className) {
+      addClass : function(element, className, styles) {
         className = !isString(className)
                         ? (isArray(className) ? className.join(' ') : '')
                         : className;
         forEach(element, function (element) {
           jqLiteAddClass(element, className);
         });
+        applyStyles(element, styles);
         return asyncPromise();
       },
 
@@ -208,13 +216,14 @@ var $AnimateProvider = ['$provide', function($provide) {
        * @param {string} className the CSS class which will be removed from the element
        * @return {Promise} the animation callback promise
        */
-      removeClass : function(element, className) {
+      removeClass : function(element, className, styles) {
         className = !isString(className)
                         ? (isArray(className) ? className.join(' ') : '')
                         : className;
         forEach(element, function (element) {
           jqLiteRemoveClass(element, className);
         });
+        applyStyles(element, styles);
         return asyncPromise();
       },
 
@@ -231,9 +240,10 @@ var $AnimateProvider = ['$provide', function($provide) {
        * @param {string} remove the CSS class which will be removed from the element
        * @return {Promise} the animation callback promise
        */
-      setClass : function(element, add, remove) {
+      setClass : function(element, add, remove, styles) {
         this.addClass(element, add);
         this.removeClass(element, remove);
+        applyStyles(element, styles);
         return asyncPromise();
       },