feat(stagger): add split stagger feature

This allows to add au-stagger-enter and au-stagger-leave besides the already existing au-stagger class, to determine whether to only animate enter/leave/all staggering animations fixes issue #20
aurelia · Jul 4, 2015 · eb27d3e · eb27d3e
1 parent 7d5ab3b
commit eb27d3e
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 13 deletions.
diff --git a/src/animator.js b/src/animator.js
@@ -248,7 +248,10 @@ export class CssAnimator {
 
       if(parent !== null &&
          parent !== undefined &&
-         parent.classList.contains('au-stagger')) {
+         (
+          parent.classList.contains('au-stagger') ||
+          parent.classList.contains('au-stagger-enter')
+         )) {
         var elemPos = Array.prototype.indexOf.call(parent.childNodes, element);
         delay = this._getElementAnimationDelay(parent) * elemPos;
 
@@ -351,7 +354,10 @@ export class CssAnimator {
 
       if(parent !== null &&
          parent !== undefined &&
-         parent.classList.contains('au-stagger')) {
+         (
+           parent.classList.contains('au-stagger') ||
+           parent.classList.contains('au-stagger-leave')
+         )) {
         var elemPos = Array.prototype.indexOf.call(parent.childNodes, element);
         delay = this._getElementAnimationDelay(parent) * elemPos;
 

diff --git a/test/animator.spec.js b/test/animator.spec.js
@@ -497,12 +497,32 @@ describe('animator-css', () => {
     });
   });
 
-  describe('staggering animations', () => {
+  fdescribe('staggering animations', () => {
     var elems;
 
     beforeEach(() => {
+      sut.useAnimationDoneClasses = true;
       loadFixtures('animation.html');
       elems = $('.stagger');
+      $(elems).removeClass('au-left');
+    });
+
+    it('should trigger stagger event', (done) => {
+      let proms = []
+        , eventCalled = false;
+
+      var listener = document.addEventListener(animationEvent.staggerNext, () => eventCalled = true);
+
+      elems.each( (idx, elem) => {
+        proms.push(sut.enter(elem));
+      });
+
+      Promise.all(proms).then( () => {
+        expect(eventCalled).toBe(true);
+
+        document.removeEventListener(animationEvent.staggerNext, listener);
+        done();
+      });
     });
 
     it('should animate enter elements staggered', (done) => {
@@ -512,8 +532,11 @@ describe('animator-css', () => {
       });
 
       Promise.all(proms).then( () => {
+        elems.each( (idx, elem) => {
+          expect($(elem).css('opacity')).toBe('1');
+        });
         done();
-      })
+      });
     });
 
     it('should animate leave elements staggered', (done) => {
@@ -523,26 +546,43 @@ describe('animator-css', () => {
       });
 
       Promise.all(proms).then( () => {
+        elems.each( (idx, elem) => {
+          expect($(elem).css('opacity')).toBe('0');
+        });
         done();
       })
     });
 
-    it('should trigger stagger event', (done) => {
-      var proms = []
-        , eventCalled = false;
-
-      var listener = document.addEventListener(animationEvent.staggerNext, () => eventCalled = true);
+    it('should animate enter element using stagger-enter', () => {
+      elems = $('.stagger-enter-only');
 
+      var proms = [];
       elems.each( (idx, elem) => {
-        proms.push(sut.enter(elem));
+        proms.push(sut.leave(elem));
       });
 
       Promise.all(proms).then( () => {
-        expect(eventCalled).toBe(true);
-
-        document.removeEventListener(animationEvent.staggerNext, listener);
+        elems.each( (idx, elem) => {
+          expect($(elem).css('opacity')).toBe('1');
+        });
         done();
+      })
+    });
+
+    it('should animate leave element using stagger-leave', () => {
+      elems = $('.stagger-leave-only');
+
+      var proms = [];
+      elems.each( (idx, elem) => {
+        proms.push(sut.leave(elem));
       });
+
+      Promise.all(proms).then( () => {
+        elems.each( (idx, elem) => {
+          expect($(elem).css('opacity')).toBe('0');
+        });
+        done();
+      })
     });
   });
 

diff --git a/test/fixtures/animation.html b/test/fixtures/animation.html
@@ -126,6 +126,32 @@
     animation:1.5s hide-animation;
   }
 
+  .stagger.au-left {
+    opacity: 0!important;
+  }
+
+
+  .stagger-enter-only.au-enter {
+    opacity: 0!important;
+  }
+
+  .stagger-enter-only.au-enter-active {
+    -webkit-animation:1.0s show-animation;
+    animation:1.0s show-animation;
+  }
+
+  .stagger-leave-only.au-leave {
+    opacity: 1!important;
+  }
+  .stagger-leave-only.au-leave-active {
+    -webkit-animation:1.0s hide-animation;
+    animation:1.0s hide-animation;
+  }
+
+  .stagger-leave-only.au-left {
+    opacity: 0!important;
+  }
+
   ul.au-stagger {
     /* 200ms will be applied between each successive enter operation */
     -webkit-animation-delay:100ms;
@@ -160,6 +186,18 @@
     <li class="stagger au-animate">Item5</li>
   </ul>
 
+  <ul class="au-stagger-enter">
+    <li class="stagger-enter-only au-animate">Item1</li>
+    <li class="stagger-enter-only au-animate">Item2</li>
+    <li class="stagger-enter-only au-animate">Item3</li>
+  </ul>
+
+  <ul class="au-stagger-leave">
+    <li class="stagger-leave-only au-animate">Item1</li>
+    <li class="stagger-leave-only au-animate">Item2</li>
+    <li class="stagger-leave-only au-animate">Item3</li>
+  </ul>
+
   <ul class="sequenced-items">
     <li class="au-animate">Sequence 1</li>
     <li class="au-animate">Sequence 2</li>