From f54e624af40bc22526106a9617ce24cb73a000a7 Mon Sep 17 00:00:00 2001 From: Zewa Date: Sat, 11 Apr 2015 17:13:47 +0200 Subject: [PATCH] feat(anim-delay): respect set animation delay This adds the feature to wait for an animation if a animation-delay is defined. --- dist/amd/animator.js | 28 ++++++++++++++++++++++++---- dist/commonjs/animator.js | 28 ++++++++++++++++++++++++---- dist/es6/animator.js | 31 +++++++++++++++++++++++++++---- dist/system/animator.js | 28 ++++++++++++++++++++++++---- package.json | 2 +- src/animator.js | 31 +++++++++++++++++++++++++++---- test/animator.spec.js | 9 +++++++++ test/fixtures/animation.html | 10 ++++++++++ 8 files changed, 146 insertions(+), 21 deletions(-) diff --git a/dist/amd/animator.js b/dist/amd/animator.js index 20291dd..e700b95 100644 --- a/dist/amd/animator.js +++ b/dist/amd/animator.js @@ -42,6 +42,26 @@ define(['exports'], function (exports) { this.animationStack.splice(idx, 1); } } + }, { + key: 'getElementAnimationDelay', + value: function getElementAnimationDelay(element) { + var styl = window.getComputedStyle(element); + var prop, delay; + + if (styl.getPropertyValue('animation-delay')) { + prop = 'animation-delay'; + } else if (styl.getPropertyValue('-webkit-animation-delay')) { + prop = '-webkit-animation-delay'; + } else if (styl.getPropertyValue('-moz-animation-delay')) { + prop = '-moz-animation-delay'; + } else { + return 0; + } + delay = styl.getPropertyValue(prop); + delay = Number(delay.replace(/[^\d\.]/g, '')); + + return delay * 1000; + } }, { key: 'move', value: function move() { @@ -90,7 +110,7 @@ define(['exports'], function (exports) { resolve(false); } - }, 400); + }, _this.getElementAnimationDelay(element) + 400); }); } }, { @@ -136,7 +156,7 @@ define(['exports'], function (exports) { resolve(false); } - }, 400); + }, _this2.getElementAnimationDelay(element) + 400); }); } }, { @@ -187,7 +207,7 @@ define(['exports'], function (exports) { resolve(false); } - }, 400); + }, _this3.getElementAnimationDelay(element) + 400); }); } }, { @@ -232,7 +252,7 @@ define(['exports'], function (exports) { resolve(false); } - }, 400); + }, _this4.getElementAnimationDelay(element) + 400); }); } }]); diff --git a/dist/commonjs/animator.js b/dist/commonjs/animator.js index 3f6e00d..9e5d990 100644 --- a/dist/commonjs/animator.js +++ b/dist/commonjs/animator.js @@ -41,6 +41,26 @@ var CssAnimator = (function () { this.animationStack.splice(idx, 1); } } + }, { + key: 'getElementAnimationDelay', + value: function getElementAnimationDelay(element) { + var styl = window.getComputedStyle(element); + var prop, delay; + + if (styl.getPropertyValue('animation-delay')) { + prop = 'animation-delay'; + } else if (styl.getPropertyValue('-webkit-animation-delay')) { + prop = '-webkit-animation-delay'; + } else if (styl.getPropertyValue('-moz-animation-delay')) { + prop = '-moz-animation-delay'; + } else { + return 0; + } + delay = styl.getPropertyValue(prop); + delay = Number(delay.replace(/[^\d\.]/g, '')); + + return delay * 1000; + } }, { key: 'move', value: function move() { @@ -89,7 +109,7 @@ var CssAnimator = (function () { resolve(false); } - }, 400); + }, _this.getElementAnimationDelay(element) + 400); }); } }, { @@ -135,7 +155,7 @@ var CssAnimator = (function () { resolve(false); } - }, 400); + }, _this2.getElementAnimationDelay(element) + 400); }); } }, { @@ -186,7 +206,7 @@ var CssAnimator = (function () { resolve(false); } - }, 400); + }, _this3.getElementAnimationDelay(element) + 400); }); } }, { @@ -231,7 +251,7 @@ var CssAnimator = (function () { resolve(false); } - }, 400); + }, _this4.getElementAnimationDelay(element) + 400); }); } }]); diff --git a/dist/es6/animator.js b/dist/es6/animator.js index d5c1370..b9ba3f9 100644 --- a/dist/es6/animator.js +++ b/dist/es6/animator.js @@ -25,6 +25,29 @@ export class CssAnimator { } } + getElementAnimationDelay(element) { + var styl = window.getComputedStyle(element); + var prop, + delay; + + if (styl.getPropertyValue('animation-delay')) { + prop = 'animation-delay'; + + } else if (styl.getPropertyValue('-webkit-animation-delay')) { + prop = '-webkit-animation-delay'; + + } else if (styl.getPropertyValue('-moz-animation-delay')) { + prop = '-moz-animation-delay'; + + } else { + return 0; + } + delay = styl.getPropertyValue(prop); + delay = Number(delay.replace(/[^\d\.]/g, '')); + + return (delay * 1000); + } + move() { return Promise.resolve(false); } @@ -81,7 +104,7 @@ export class CssAnimator { resolve(false); } - }, 400); + }, this.getElementAnimationDelay(element) + 400); }); } @@ -137,7 +160,7 @@ export class CssAnimator { resolve(false); } - }, 400); + }, this.getElementAnimationDelay(element) + 400); }); } @@ -198,7 +221,7 @@ export class CssAnimator { resolve(false); } - }, 400); + }, this.getElementAnimationDelay(element) + 400); }); } @@ -253,7 +276,7 @@ export class CssAnimator { resolve(false); } - }, 400); + }, this.getElementAnimationDelay(element) + 400); }); } } diff --git a/dist/system/animator.js b/dist/system/animator.js index c7f96a0..0a8b951 100644 --- a/dist/system/animator.js +++ b/dist/system/animator.js @@ -43,6 +43,26 @@ System.register([], function (_export) { this.animationStack.splice(idx, 1); } } + }, { + key: 'getElementAnimationDelay', + value: function getElementAnimationDelay(element) { + var styl = window.getComputedStyle(element); + var prop, delay; + + if (styl.getPropertyValue('animation-delay')) { + prop = 'animation-delay'; + } else if (styl.getPropertyValue('-webkit-animation-delay')) { + prop = '-webkit-animation-delay'; + } else if (styl.getPropertyValue('-moz-animation-delay')) { + prop = '-moz-animation-delay'; + } else { + return 0; + } + delay = styl.getPropertyValue(prop); + delay = Number(delay.replace(/[^\d\.]/g, '')); + + return delay * 1000; + } }, { key: 'move', value: function move() { @@ -91,7 +111,7 @@ System.register([], function (_export) { resolve(false); } - }, 400); + }, _this.getElementAnimationDelay(element) + 400); }); } }, { @@ -137,7 +157,7 @@ System.register([], function (_export) { resolve(false); } - }, 400); + }, _this2.getElementAnimationDelay(element) + 400); }); } }, { @@ -188,7 +208,7 @@ System.register([], function (_export) { resolve(false); } - }, 400); + }, _this3.getElementAnimationDelay(element) + 400); }); } }, { @@ -233,7 +253,7 @@ System.register([], function (_export) { resolve(false); } - }, 400); + }, _this4.getElementAnimationDelay(element) + 400); }); } }]); diff --git a/package.json b/package.json index 7767c79..b7aac09 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aurelia-animator-css", - "version": "0.1.1", + "version": "0.1.2", "description": "An implementation of the abstract Animator interface from templating which enables css-based animations.", "keywords": [ "aurelia", diff --git a/src/animator.js b/src/animator.js index d5c1370..b9ba3f9 100644 --- a/src/animator.js +++ b/src/animator.js @@ -25,6 +25,29 @@ export class CssAnimator { } } + getElementAnimationDelay(element) { + var styl = window.getComputedStyle(element); + var prop, + delay; + + if (styl.getPropertyValue('animation-delay')) { + prop = 'animation-delay'; + + } else if (styl.getPropertyValue('-webkit-animation-delay')) { + prop = '-webkit-animation-delay'; + + } else if (styl.getPropertyValue('-moz-animation-delay')) { + prop = '-moz-animation-delay'; + + } else { + return 0; + } + delay = styl.getPropertyValue(prop); + delay = Number(delay.replace(/[^\d\.]/g, '')); + + return (delay * 1000); + } + move() { return Promise.resolve(false); } @@ -81,7 +104,7 @@ export class CssAnimator { resolve(false); } - }, 400); + }, this.getElementAnimationDelay(element) + 400); }); } @@ -137,7 +160,7 @@ export class CssAnimator { resolve(false); } - }, 400); + }, this.getElementAnimationDelay(element) + 400); }); } @@ -198,7 +221,7 @@ export class CssAnimator { resolve(false); } - }, 400); + }, this.getElementAnimationDelay(element) + 400); }); } @@ -253,7 +276,7 @@ export class CssAnimator { resolve(false); } - }, 400); + }, this.getElementAnimationDelay(element) + 400); }); } } diff --git a/test/animator.spec.js b/test/animator.spec.js index d755b43..ad4ee31 100644 --- a/test/animator.spec.js +++ b/test/animator.spec.js @@ -29,6 +29,15 @@ describe('animator-css', () => { }); }); + it('should respect animation-delay', (done) => { + var elem = $('#delayedElement').eq(0)[0]; + + sut.enter(elem).then( () => { + expect(sut.animationStack.length).toBe(0); + done(); + }); + }); + it('should kick off animation', (done) => { var elem = $('.animated-item').eq(0)[0]; diff --git a/test/fixtures/animation.html b/test/fixtures/animation.html index ec871b5..22a9c21 100644 --- a/test/fixtures/animation.html +++ b/test/fixtures/animation.html @@ -49,6 +49,14 @@ width: 40px; } + #delayedElement.au-enter-active { + -webkit-animation:0.2s show-animation; + animation:0.2s show-animation; + + -webkit-animation-delay: 3s; + animation-delay: 3s; + } + @keyframes add-more-width-animation { from { width: 20px; } to { width: 40px; } @@ -80,4 +88,6 @@
I'm going to get bigger
+ +
Delayed element