feat($animate): introduce the $animate.animate() method

Author: matsko

src/ng/animate.js

@@ -174,6 +174,10 @@ var $AnimateProvider = ['$provide', function($provide) {
      * page}.
      */
     return {
+      animate : function(element, from, to) {
+        applyStyles(element, { from: from, to: to });
+        return asyncPromise();
+      },
 
       /**
        *

src/ngAnimate/animate.js

@@ -631,9 +631,10 @@ angular.module('ngAnimate', ['ng'])
         }
 
         var isSetClassOperation = animationEvent == 'setClass';
-        var isClassBased = isSetClassOperation ||
-                           animationEvent == 'addClass' ||
-                           animationEvent == 'removeClass';
+        var isClassBased = isSetClassOperation
+                           || animationEvent == 'addClass'
+                           || animationEvent == 'removeClass'
+                           || animationEvent == 'animate';
 
         var currentClassName = element.attr('class');
         var classes = currentClassName + ' ' + className;
@@ -703,6 +704,9 @@ angular.module('ngAnimate', ['ng'])
               case 'setClass':
                 cancellations.push(animation.fn(element, classNameAdd, classNameRemove, progress, options));
                 break;
+              case 'animate':
+                cancellations.push(animation.fn(element, className, progress, options));
+                break;
               case 'addClass':
                 cancellations.push(animation.fn(element, classNameAdd || className,     progress, options));
                 break;
@@ -822,6 +826,17 @@ angular.module('ngAnimate', ['ng'])
        *
        */
       return {
+        animate : function(element, from, to, className, options) {
+          className = className || 'ng-inline-animate';
+          options = options || {};
+          options.from = to ? from : null;
+          options.to   = to ? to : from;
+
+          return runAnimationPostDigest(function(done) {
+            return performAnimation('animate', className, stripCommentsFromElement(element), null, null, noop, options, done);
+          });
+        },
+
         /**
          * @ngdoc method
          * @name $animate#enter
@@ -1259,7 +1274,10 @@ angular.module('ngAnimate', ['ng'])
           }
         }
 
-        if (runner.isClassBased && !runner.isSetClassOperation && !skipAnimation) {
+        if (runner.isClassBased
+            && !runner.isSetClassOperation
+            && animationEvent != 'animate'
+            && !skipAnimation) {
           skipAnimation = (animationEvent == 'addClass') == element.hasClass(className); //opposite of XOR
         }
 
@@ -1950,6 +1968,11 @@ angular.module('ngAnimate', ['ng'])
       }
 
       return {
+        animate : function(element, className, animationCompleted, options) {
+          options = options || {};
+          return animate('animate', element, className, animationCompleted, options);
+        },
+
         enter : function(element, animationCompleted, options) {
           options = options || {};
           return animate('enter', element, 'ng-enter', animationCompleted, options);

src/ngMock/angular-mocks.js

@@ -803,7 +803,7 @@ angular.mock.animate = angular.module('ngAnimateMock', ['ng'])
       };
 
       angular.forEach(
-        ['enter','leave','move','addClass','removeClass','setClass'], function(method) {
+        ['animate','enter','leave','move','addClass','removeClass','setClass'], function(method) {
         animate[method] = function() {
           animate.queue.push({
             event : method,

test/ng/animateSpec.js

@@ -50,6 +50,15 @@ describe("$animate", function() {
       expect(element.text()).toBe('21');
     }));
 
+    it("should apply styles instantly to the element",
+      inject(function($animate, $compile, $rootScope) {
+
+      $animate.animate(element, { color: 'rgb(0, 0, 0)' });
+      expect(element.css('color')).toBe('rgb(0, 0, 0)');
+
+      $animate.animate(element, { color: 'rgb(255, 0, 0)' }, { color: 'rgb(0, 255, 0)' });
+      expect(element.css('color')).toBe('rgb(0, 255, 0)');
+    }));
 
     it("should still perform DOM operations even if animations are disabled (post-digest)", inject(function($animate, $rootScope) {
       $animate.enabled(false);

test/ngAnimate/animateSpec.js

@@ -329,7 +329,7 @@ describe("ngAnimate", function() {
             return function($animate, $compile, $rootScope, $rootElement) {
               element = $compile('<div></div>')($rootScope);
 
-              forEach(['.ng-hide-add', '.ng-hide-remove', '.ng-enter', '.ng-leave', '.ng-move'], function(selector) {
+              forEach(['.ng-hide-add', '.ng-hide-remove', '.ng-enter', '.ng-leave', '.ng-move', '.my-inline-animation'], function(selector) {
                 ss.addRule(selector, '-webkit-transition:1s linear all;' +
                                              'transition:1s linear all;');
               });
@@ -454,6 +454,20 @@ describe("ngAnimate", function() {
           expect(element.text()).toBe('21');
         }));
 
+        it("should perform the animate event",
+          inject(function($animate, $compile, $rootScope, $timeout, $sniffer) {
+
+          $rootScope.$digest();
+          $animate.animate(element, { color: 'rgb(255, 0, 0)' }, { color: 'rgb(0, 0, 255)' }, 'animated');
+          $rootScope.$digest();
+
+          if($sniffer.transitions) {
+            expect(element.css('color')).toBe('rgb(255, 0, 0)');
+            $animate.triggerReflow();
+          }
+          expect(element.css('color')).toBe('rgb(0, 0, 255)');
+        }));
+
         it("should animate the show animation event",
           inject(function($animate, $rootScope, $sniffer) {
 
@@ -653,6 +667,16 @@ describe("ngAnimate", function() {
           expect(child.attr('class')).toContain('ng-hide-remove-active');
           browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
 
+          //animate
+          $animate.animate(child, null, null, 'my-inline-animation');
+          $rootScope.$digest();
+          $animate.triggerReflow();
+
+          expect(child.attr('class')).toContain('my-inline-animation');
+          expect(child.attr('class')).toContain('my-inline-animation-active');
+          browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
+          $animate.triggerCallbackPromise();
+
           //leave
           $animate.leave(child);
           $rootScope.$digest();