fix(stagger): add leave animation stagger (#62)

missing animation stagger for au-stagger-leave
fix stagger animation tests

Author: Brooks

src/animator.js

@@ -307,7 +307,6 @@ export class CssAnimator {
 
       // Step 4: check if parent element is defined to stagger animations otherwise trigger active immediately
       const parent = element.parentElement;
-      let delay = 0;
       const attrib = 'data-animator-pending' + direction;
 
       const cleanupAnimation = () => {
@@ -326,15 +325,11 @@ export class CssAnimator {
         parent && parent.setAttribute(attrib, +(parent.getAttribute(attrib) || 1) - 1);
       };
 
-      if (parent !== null &&
-          parent !== undefined &&
-          (
-            parent.classList.contains('au-stagger') ||
-            parent.classList.contains('au-stagger-enter')
-          )) {
+      if (parent !== null && parent !== undefined &&
+         (parent.classList.contains('au-stagger') || parent.classList.contains('au-stagger-' + direction))) {
         const offset = +(parent.getAttribute(attrib) || 0);
         parent.setAttribute(attrib, offset + 1);
-        delay = this._getElementAnimationDelay(parent) * offset;
+        const delay = this._getElementAnimationDelay(parent) * offset;
         this._triggerDOMEvent(animationEvent.staggerNext, element);
 
         setTimeout(() => {
@@ -504,7 +499,7 @@ export class CssAnimator {
         if (evAnimEnd.target !== element) {
           return;
         }
-    
+
         // Step 2.1.0: Stop event propagation, bubbling will otherwise prevent parent animation
         evAnimEnd.stopPropagation();
 

test/animator.spec.js

@@ -615,31 +615,41 @@ describe('animator-css', () => {
     });
 
     it('should animate enter element using stagger-enter', (done) => {
-      elems = $('.stagger-enter-only');
+      let eelems = $('.stagger-enter-only');
+
+      setTimeout( () => {
+        expect($(eelems[0]).css('opacity')).not.toBe('0');
+        expect($(eelems[eelems.length - 1]).css('opacity')).toBe('0');
+      }, 100 );
 
       let proms = [];
-      elems.each( (idx, elem) => {
-        proms.push(sut.leave(elem));
+      eelems.each( (idx, elem) => {
+        proms.push(sut.enter(elem));
       });
 
       Promise.all(proms).then( () => {
-        elems.each( (idx, elem) => {
+        eelems.each( (idx, elem) => {
           expect($(elem).css('opacity')).toBe('1');
         });
         done();
       });
     });
 
     it('should animate leave element using stagger-leave', (done) => {
-      elems = $('.stagger-leave-only');
+      let lelems = $('.stagger-leave-only');
+
+      setTimeout( () => {
+        expect($(lelems[0]).css('opacity')).not.toBe('1');
+        expect($(lelems[lelems.length - 1]).css('opacity')).toBe('1');
+      }, 100 );
 
       let proms = [];
-      elems.each( (idx, elem) => {
+      lelems.each( (idx, elem) => {
         proms.push(sut.leave(elem));
       });
 
       Promise.all(proms).then( () => {
-        elems.each( (idx, elem) => {
+        lelems.each( (idx, elem) => {
           expect($(elem).css('opacity')).toBe('0');
         });
         done();

test/fixtures/animation.html

@@ -137,11 +137,11 @@
     opacity: 0!important;
   }
 
-  ul.au-stagger {
-    /* 200ms will be applied between each successive enter operation */
+  ul.au-stagger, ul.au-stagger-leave, ul.au-stagger-enter {
     -webkit-animation-delay:100ms;
     animation-delay:100ms;
   }
+
 </style>
 
 <div id="animation">