feat(anim-done): indicate when animation is done via classes

this adds an opt-in feature to add entered/left classes to elements after successful animations. This can be used to setup an ending style for the element after its animation phase Fixes issue #11
aurelia · May 30, 2015 · 6779c9f · 6779c9f
1 parent cb5dfa3
commit 6779c9f
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 11 deletions.
diff --git a/dist/amd/animator.js b/dist/amd/animator.js
@@ -10,6 +10,10 @@ define(['exports'], function (exports) {
       _classCallCheck(this, CssAnimator);
 
       this.animationStack = [];
+
+      this.useAnimationDoneClasses = false;
+      this.animationEnteredClass = 'au-entered';
+      this.animationLeftClass = 'au-left';
     }
 
     CssAnimator.prototype.addMultipleEventListener = function addMultipleEventListener(el, s, fn) {
@@ -84,6 +88,10 @@ define(['exports'], function (exports) {
 
             evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);
 
+            if (_this.useAnimationDoneClasses) {
+              classList.add(_this.animationEnteredClass);
+            }
+
             resolve(true);
           }, false);
 
@@ -141,6 +149,10 @@ define(['exports'], function (exports) {
 
             evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);
 
+            if (_this2.useAnimationDoneClasses) {
+              classList.add(_this2.animationLeftClass);
+            }
+
             resolve(true);
           }, false);
 

diff --git a/dist/amd/index.js b/dist/amd/index.js
@@ -5,7 +5,9 @@ define(['exports', 'aurelia-templating', './animator'], function (exports, _aure
   exports.configure = configure;
   exports.CssAnimator = _animator.CssAnimator;
 
-  function configure(aurelia) {
-    _aureliaTemplating.Animator.configureDefault(aurelia.container, new _animator.CssAnimator());
+  function configure(aurelia, cb) {
+    var animator = new _animator.CssAnimator();
+    _aureliaTemplating.Animator.configureDefault(aurelia.container, animator);
+    cb(animator);
   }
 });
diff --git a/dist/commonjs/animator.js b/dist/commonjs/animator.js
@@ -9,6 +9,10 @@ var CssAnimator = (function () {
     _classCallCheck(this, CssAnimator);
 
     this.animationStack = [];
+
+    this.useAnimationDoneClasses = false;
+    this.animationEnteredClass = 'au-entered';
+    this.animationLeftClass = 'au-left';
   }
 
   CssAnimator.prototype.addMultipleEventListener = function addMultipleEventListener(el, s, fn) {
@@ -83,6 +87,10 @@ var CssAnimator = (function () {
 
           evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);
 
+          if (_this.useAnimationDoneClasses) {
+            classList.add(_this.animationEnteredClass);
+          }
+
           resolve(true);
         }, false);
 
@@ -140,6 +148,10 @@ var CssAnimator = (function () {
 
           evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);
 
+          if (_this2.useAnimationDoneClasses) {
+            classList.add(_this2.animationLeftClass);
+          }
+
           resolve(true);
         }, false);
 

diff --git a/dist/commonjs/index.js b/dist/commonjs/index.js
@@ -9,6 +9,8 @@ var _CssAnimator = require('./animator');
 
 exports.CssAnimator = _CssAnimator.CssAnimator;
 
-function configure(aurelia) {
-  _Animator.Animator.configureDefault(aurelia.container, new _CssAnimator.CssAnimator());
+function configure(aurelia, cb) {
+  var animator = new _CssAnimator.CssAnimator();
+  _Animator.Animator.configureDefault(aurelia.container, animator);
+  cb(animator);
 }
diff --git a/dist/es6/animator.js b/dist/es6/animator.js
@@ -1,6 +1,10 @@
 export class CssAnimator {
   constructor(){
     this.animationStack = [];
+
+    this.useAnimationDoneClasses = false;
+    this.animationEnteredClass = 'au-entered';
+    this.animationLeftClass = 'au-left';
   }
 
   addMultipleEventListener(el, s, fn) {
@@ -83,6 +87,11 @@ export class CssAnimator {
           // Step 3.2.3 remove animationend listener
           evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);
 
+          // Step 3.2.4 in case animation done animations are active, add the defined entered class to the element
+          if(this.useAnimationDoneClasses) {
+            classList.add(this.animationEnteredClass);
+          }
+
           resolve(true);
         }, false);
 
@@ -153,6 +162,11 @@ export class CssAnimator {
           // Step 3.2.3 remove animationend listener
           evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);
 
+          // Step 3.2.4 in case animation done animations are active, add the defined left class to the element
+          if(this.useAnimationDoneClasses) {
+            classList.add(this.animationLeftClass);
+          }
+
           resolve(true);
         }, false);
 

diff --git a/dist/es6/index.js b/dist/es6/index.js
@@ -3,6 +3,8 @@ import {CssAnimator} from './animator';
 
 export {CssAnimator} from './animator';
 
-export function configure(aurelia){
-  Animator.configureDefault(aurelia.container, new CssAnimator());
+export function configure(aurelia, cb){
+  var animator = new CssAnimator();
+  Animator.configureDefault(aurelia.container, animator);
+  cb(animator);
 }
diff --git a/dist/system/animator.js b/dist/system/animator.js
@@ -13,6 +13,10 @@ System.register([], function (_export) {
           _classCallCheck(this, CssAnimator);
 
           this.animationStack = [];
+
+          this.useAnimationDoneClasses = false;
+          this.animationEnteredClass = 'au-entered';
+          this.animationLeftClass = 'au-left';
         }
 
         CssAnimator.prototype.addMultipleEventListener = function addMultipleEventListener(el, s, fn) {
@@ -87,6 +91,10 @@ System.register([], function (_export) {
 
                 evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);
 
+                if (_this.useAnimationDoneClasses) {
+                  classList.add(_this.animationEnteredClass);
+                }
+
                 resolve(true);
               }, false);
 
@@ -144,6 +152,10 @@ System.register([], function (_export) {
 
                 evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);
 
+                if (_this2.useAnimationDoneClasses) {
+                  classList.add(_this2.animationLeftClass);
+                }
+
                 resolve(true);
               }, false);
 

diff --git a/dist/system/index.js b/dist/system/index.js
@@ -3,8 +3,10 @@ System.register(['aurelia-templating', './animator'], function (_export) {
 
   _export('configure', configure);
 
-  function configure(aurelia) {
-    Animator.configureDefault(aurelia.container, new CssAnimator());
+  function configure(aurelia, cb) {
+    var animator = new CssAnimator();
+    Animator.configureDefault(aurelia.container, animator);
+    cb(animator);
   }
 
   return {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aurelia-animator-css",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "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
@@ -1,6 +1,10 @@
 export class CssAnimator {
   constructor(){
     this.animationStack = [];
+
+    this.useAnimationDoneClasses = false;
+    this.animationEnteredClass = 'au-entered';
+    this.animationLeftClass = 'au-left';
   }
 
   addMultipleEventListener(el, s, fn) {
@@ -83,6 +87,11 @@ export class CssAnimator {
           // Step 3.2.3 remove animationend listener
           evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);
 
+          // Step 3.2.4 in case animation done animations are active, add the defined entered class to the element
+          if(this.useAnimationDoneClasses) {
+            classList.add(this.animationEnteredClass);
+          }
+
           resolve(true);
         }, false);
 
@@ -153,6 +162,11 @@ export class CssAnimator {
           // Step 3.2.3 remove animationend listener
           evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);
 
+          // Step 3.2.4 in case animation done animations are active, add the defined left class to the element
+          if(this.useAnimationDoneClasses) {
+            classList.add(this.animationLeftClass);
+          }
+
           resolve(true);
         }, false);
 

diff --git a/src/index.js b/src/index.js
@@ -3,6 +3,8 @@ import {CssAnimator} from './animator';
 
 export {CssAnimator} from './animator';
 
-export function configure(aurelia){
-  Animator.configureDefault(aurelia.container, new CssAnimator());
+export function configure(aurelia, cb){
+  var animator = new CssAnimator();
+  Animator.configureDefault(aurelia.container, animator);
+  cb(animator);
 }
diff --git a/test/animator.spec.js b/test/animator.spec.js
@@ -1,3 +1,4 @@
+import {configure} from '../src/index';
 import {CssAnimator} from '../src/animator';
 
 jasmine.getFixtures().fixturesPath = 'base/test/fixtures/';
@@ -8,6 +9,39 @@ describe('animator-css', () => {
     sut = new CssAnimator();
   });
 
+  describe('plugin initialization', () => {
+    var aurelia = {
+      globalizeResources: () => {
+
+      },
+      container: {
+        registerInstance: (type, instance) => {
+
+        },
+        get: (type) => { return new type(); }
+      }
+    };
+
+    it('should export configure function', () => {
+      expect(typeof configure).toBe('function');
+    });
+
+    it('should accept a setup callback passing back the animator instance', (done) => {
+      var cb = (instance) => {
+        expect(typeof instance).toBe('object');
+        done();
+      };
+
+      configure(aurelia, cb);
+    });
+
+    it('should have animation done classes disabled by default', () => {
+      configure(aurelia, (instance) => {
+        expect(instance.useAnimationDoneClasses).toBe(false);
+      });
+    });
+  });
+
   describe('enter animation', () => {
     var elem;
     beforeEach(() => {
@@ -64,6 +98,27 @@ describe('animator-css', () => {
         done();
       });
     });
+
+    it('should not add left class by default', (done) => {
+      var elem = $('.animated-item').eq(0)[0];
+
+      sut.enter(elem).then( () => {
+        expect(elem.classList.contains("au-entered")).toBe(false);
+        done();
+      });
+    });
+
+    it('should add configured entered class', (done) => {
+      sut.useAnimationDoneClasses = true;
+      sut.animationEnteredClass = 'custom-entered';
+
+      var elem = $('.animated-item').eq(0)[0];
+
+      sut.enter(elem).then( () => {
+        expect(elem.classList.contains("custom-entered")).toBe(true);
+        done();
+      });
+    });
   });
 
   describe('leave animation', () => {
@@ -111,6 +166,27 @@ describe('animator-css', () => {
         done();
       });
     });
+
+    it('should not add left class by default', (done) => {
+      var elem = $('.animated-item').eq(0)[0];
+
+      sut.leave(elem).then( () => {
+        expect(elem.classList.contains("au-left")).toBe(false);
+        done();
+      });
+    });
+
+    it('should add configured entered class', (done) => {
+      sut.useAnimationDoneClasses = true;
+      sut.animationLeftClass = 'custom-left';
+
+      var elem = $('.animated-item').eq(0)[0];
+
+      sut.leave(elem).then( () => {
+        expect(elem.classList.contains("custom-left")).toBe(true);
+        done();
+      });
+    });
   });
 
   describe('removeClass animation', () => {