feat(ngAnimate): provide support for staggering animations with CSS

1 files changed, 122 insertions, 1 deletions

diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
index 4d3fdd1f..7bd9fc85 100644
--- a/test/ngAnimate/animateSpec.js
+++ b/test/ngAnimate/animateSpec.js
@@ -642,6 +642,66 @@ describe("ngAnimate", function() {
 
             expect(element.hasClass('ng-hide-remove-active')).toBe(false);
         }));
+
+        it("should stagger the items when the correct CSS class is provided",
+          inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) {
+
+          if(!$sniffer.animations) return;
+
+          $animate.enabled(true);
+
+          ss.addRule('.ani.ng-enter, .ani.ng-leave, .ani-fake.ng-enter, .ani-fake.ng-leave',
+            '-webkit-animation:1s my_animation;' + 
+            'transition:1s my_animation;');
+
+          ss.addRule('.ani.ng-enter-stagger, .ani.ng-leave-stagger',
+            '-webkit-animation-delay:0.1s;' +
+            '-webkit-animation-duration:0s;' +
+            'animation-delay:0.1s;' + 
+            'animation-duration:0s;');
+
+          ss.addRule('.ani-fake.ng-enter-stagger, .ani-fake.ng-leave-stagger',
+            '-webkit-animation-delay:0.1s;' +
+            '-webkit-animation-duration:1s;' +
+            'animation-delay:0.1s;' + 
+            'animation-duration:1s;');
+
+          var container = $compile(html('<div></div>'))($rootScope);
+
+          var elements = [];
+          for(var i = 0; i < 5; i++) {
+            var newScope = $rootScope.$new();
+            var element = $compile('<div class="ani"></div>')(newScope);
+            $animate.enter(element, container);
+            elements.push(element);
+          };
+
+          $rootScope.$digest();
+          $timeout.flush();
+
+          expect(elements[0].attr('style')).toBeFalsy();
+          expect(elements[1].attr('style')).toMatch(/animation-delay: 0\.1\d*s/);
+          expect(elements[2].attr('style')).toMatch(/animation-delay: 0\.2\d*s/);
+          expect(elements[3].attr('style')).toMatch(/animation-delay: 0\.3\d*s/);
+          expect(elements[4].attr('style')).toMatch(/animation-delay: 0\.4\d*s/);
+
+          for(var i = 0; i < 5; i++) {
+            dealoc(elements[i]);
+            var newScope = $rootScope.$new();
+            var element = $compile('<div class="ani-fake"></div>')(newScope);
+            $animate.enter(element, container);
+            elements[i] = element;
+          };
+
+          $rootScope.$digest();
+          $timeout.flush();
+
+          expect(elements[0].attr('style')).toBeFalsy();
+          expect(elements[1].attr('style')).not.toMatch(/animation-delay: 0\.1\d*s/);
+          expect(elements[2].attr('style')).not.toMatch(/animation-delay: 0\.2\d*s/);
+          expect(elements[3].attr('style')).not.toMatch(/animation-delay: 0\.3\d*s/);
+          expect(elements[4].attr('style')).not.toMatch(/animation-delay: 0\.4\d*s/);
+        }));
       });
 
       describe("Transitions", function() {
@@ -785,6 +845,66 @@ describe("ngAnimate", function() {
               expect(element.hasClass('ng-hide-add-active')).toBe(true);
             }
         }));
+
+        it("should stagger the items when the correct CSS class is provided",
+          inject(function($animate, $rootScope, $compile, $sniffer, $timeout, $document, $rootElement) {
+
+          if(!$sniffer.transitions) return;
+
+          $animate.enabled(true);
+
+          ss.addRule('.ani.ng-enter, .ani.ng-leave, .ani-fake.ng-enter, .ani-fake.ng-leave',
+            '-webkit-transition:1s linear all;' + 
+            'transition:1s linear all;');
+
+          ss.addRule('.ani.ng-enter-stagger, .ani.ng-leave-stagger',
+            '-webkit-transition-delay:0.1s;' +
+            '-webkit-transition-duration:0s;' +
+            'transition-delay:0.1s;' + 
+            'transition-duration:0s;');
+
+          ss.addRule('.ani-fake.ng-enter-stagger, .ani-fake.ng-leave-stagger',
+            '-webkit-transition-delay:0.1s;' +
+            '-webkit-transition-duration:1s;' +
+            'transition-delay:0.1s;' + 
+            'transition-duration:1s;');
+
+          var container = $compile(html('<div></div>'))($rootScope);
+
+          var elements = [];
+          for(var i = 0; i < 5; i++) {
+            var newScope = $rootScope.$new();
+            var element = $compile('<div class="ani"></div>')(newScope);
+            $animate.enter(element, container);
+            elements.push(element);
+          };
+
+          $rootScope.$digest();
+          $timeout.flush();
+
+          expect(elements[0].attr('style')).toBeFalsy();
+          expect(elements[1].attr('style')).toMatch(/transition-delay: 0\.1\d*s/);
+          expect(elements[2].attr('style')).toMatch(/transition-delay: 0\.2\d*s/);
+          expect(elements[3].attr('style')).toMatch(/transition-delay: 0\.3\d*s/);
+          expect(elements[4].attr('style')).toMatch(/transition-delay: 0\.4\d*s/);
+
+          for(var i = 0; i < 5; i++) {
+            dealoc(elements[i]);
+            var newScope = $rootScope.$new();
+            var element = $compile('<div class="ani-fake"></div>')(newScope);
+            $animate.enter(element, container);
+            elements[i] = element;
+          };
+
+          $rootScope.$digest();
+          $timeout.flush();
+
+          expect(elements[0].attr('style')).toBeFalsy();
+          expect(elements[1].attr('style')).not.toMatch(/transition-delay: 0\.1\d*s/);
+          expect(elements[2].attr('style')).not.toMatch(/transition-delay: 0\.2\d*s/);
+          expect(elements[3].attr('style')).not.toMatch(/transition-delay: 0\.3\d*s/);
+          expect(elements[4].attr('style')).not.toMatch(/transition-delay: 0\.4\d*s/);
+        }));
       });
     });
 
@@ -2008,7 +2128,8 @@ describe("ngAnimate", function() {
       $rootScope.$digest();
       $timeout.flush();
 
-      expect(count).toBe(2);
+      //called three times since the classname is the same
+      expect(count).toBe(3);
 
       dealoc(element);
       count = 0;