Permalink
Browse files

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

missing animation stagger for au-stagger-leave
fix stagger animation tests
  • Loading branch information...
z-brooks authored and zewa666 committed Sep 26, 2017
1 parent bb85e90 commit 74904c48c4efbcd6070b26a53def319beaf0914b
Showing with 23 additions and 18 deletions.
  1. +4 −9 src/animator.js
  2. +17 −7 test/animator.spec.js
  3. +2 −2 test/fixtures/animation.html
View
@@ -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();
View
@@ -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();
@@ -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">

0 comments on commit 74904c4

Please sign in to comment.