feat(anim-delay): respect set animation delay

This adds the feature to wait for an animation if a animation-delay is defined.
aurelia · Apr 11, 2015 · f54e624 · f54e624
1 parent fd0bf51
commit f54e624
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 @@
   <div id="goingToBeIncreased">
     I'm going to get bigger
   </div>
+
+  <div id="delayedElement" class="au-animate">Delayed element</div>
 </div>