refactor(transitions): created Transition class

Created interfaces for NavOptions, AnimationOptions and
TransitionOptions Created Transition class and move transition ts files
to their own folder.

Author: adamdbradley

ionic/animations/animation.ts

@@ -1,6 +1,5 @@
-import {ViewController} from '../components/nav/view-controller';
 import {CSS, rafFrames, raf, transitionEnd} from '../util/dom';
-import {assign} from '../util/util';
+import {assign, isDefined} from '../util/util';
 
 
 /**
@@ -25,12 +24,14 @@ export class Animation {
   private _fOnceFns: Array<Function>;
   private _wChg: boolean = false;
   private _rv: boolean;
+  private _unregTrans: Function;
+  private _tmr;
 
   public isPlaying: boolean;
   public hasTween: boolean;
   public meta;
 
-  constructor(ele?, opts={}) {
+  constructor(ele?, opts: AnimationOptions = {}) {
     this._reset();
     this.element(ele);
 
@@ -54,6 +55,8 @@ export class Animation {
     this._fFns = [];
     this._fOnceFns = [];
 
+    this._clearAsync();
+
     this.isPlaying = this.hasTween = this._rv = false;
     this._el = this._easing = this._dur = null;
   }
@@ -106,11 +109,11 @@ export class Animation {
     return this;
   }
 
-  from(prop: string, val: string): Animation {
+  from(prop: string, val): Animation {
     return this._addProp('from', prop, val);
   }
 
-  to(prop: string, val: string): Animation {
+  to(prop: string, val): Animation {
     return this._addProp('to', prop, val);
   }
 
@@ -196,12 +199,12 @@ export class Animation {
     }
   }
 
-  play() {
+  play(opts: PlayOptions = {}) {
     var self = this;
+    var i;
+    var duration = isDefined(opts.duration) ? opts.duration : self._dur;
 
-    var i, fallbackTimerId, deregTransEnd;
-
-    console.debug('Animation, play, duration', self._dur, 'easing', self._easing);
+    console.debug('Animation, play, duration', duration, 'easing', self._easing);
 
     // always default that an animation does not tween
     // a tween requires that an Animation class has an element
@@ -226,7 +229,10 @@ export class Animation {
     // will recursively stage all child elements
     self._before();
 
-    if (self._dur > 30) {
+    // ensure all past transition end events have been cleared
+    this._clearAsync();
+
+    if (duration > 30) {
       // this animation has a duration, so it should animate
       // place all the elements with their FROM properties
 
@@ -235,17 +241,17 @@ export class Animation {
 
       self._willChange(true);
 
-      // set the TRANSITION END event
+      // set the async TRANSITION END event
       // and run onFinishes when the transition ends
-      self._asyncEnd(self._dur);
+      self._asyncEnd(duration);
 
       // begin each animation when everything is rendered in their place
       // and the transition duration/easing is ready to go
       rafFrames(self._opts.renderDelay / 16, function() {
         // there's been a moment and the elements are in place
 
         // now set the TRANSITION duration/easing
-        self._setTrans(self._dur, false);
+        self._setTrans(duration, false);
 
         // wait a few moments again to wait for the transition
         // info to take hold in the DOM
@@ -264,47 +270,73 @@ export class Animation {
       // just go straight to the TO properties and call it done
       self._progress(1);
 
-      // so there was no animation, immediately run the after
+      // since there was no animation, immediately run the after
       self._after();
 
-      // so there was no animation, it's done
+      // since there was no animation, it's done
       // fire off all the onFinishes
       self._onFinish();
     }
   }
 
-  _asyncEnd(duration: number) {
+  stop(opts: PlayOptions = {}) {
     var self = this;
-    var deregTransEnd, fallbackTimerId;
+    var duration = isDefined(opts.duration) ? opts.duration : 0;
+    var stepValue = isDefined(opts.stepValue) ? opts.stepValue : 1;
 
-    // set the TRANSITION END event
-    deregTransEnd = transitionEnd(self._transEl(), function() {
-      // transition has completed
-      console.debug('Animation, transition end');
+    // ensure all past transition end events have been cleared
+    this._clearAsync();
 
-      // cancel the fallback timer so it doesn't fire also
-      clearTimeout(fallbackTimerId);
+    // set the TO properties
+    self._progress(stepValue);
 
-      // set the after styles
+    if (duration > 30) {
+      // this animation has a duration, so it should animate
+      // place all the elements with their TO properties
+
+      // now set the TRANSITION duration
+      self._setTrans(duration, true);
+
+      // set the async TRANSITION END event
+      // and run onFinishes when the transition ends
+      self._asyncEnd(duration);
+
+    } else {
+      // this animation does not have a duration, so it should not animate
+      // just go straight to the TO properties and call it done
       self._after();
-      self._willChange(false);
+
+      // since there was no animation, it's done
+      // fire off all the onFinishes
       self._onFinish();
-    });
+    }
+  }
 
-    // set a fallback timeout if the transition end event never fires
-    fallbackTimerId = setTimeout(function() {
-      // fallback timeout fired instead of the transition end
-      console.debug('Animation, fallback end');
+  _asyncEnd(duration: number) {
+    var self = this;
 
-      // deregister the transition end event listener
-      deregTransEnd();
+    function onTransitionEnd(ev) {
+      console.debug('Animation async end,', (ev ? 'transitionEnd event' : 'fallback timeout'));
+
+      // ensure transition end events and timeouts have been cleared
+      self._clearAsync();
 
       // set the after styles
       self._after();
       self._willChange(false);
       self._onFinish();
+    }
+
+    // set the TRANSITION END event on one of the transition elements
+    self._unregTrans = transitionEnd(self._transEl(), onTransitionEnd);
+
+    // set a fallback timeout if the transition end event never fires
+    self._tmr = setTimeout(onTransitionEnd, duration + 300);
+  }
 
-    }, duration + 300);
+  _clearAsync() {
+    this._unregTrans && this._unregTrans();
+    clearTimeout(this._tmr);
   }
 
   _progress(stepValue: number) {
@@ -565,7 +597,11 @@ export class Animation {
     return this;
   }
 
-  onFinish(callback: Function, onceTimeCallback: boolean = false) {
+  onFinish(callback: Function, onceTimeCallback: boolean = false, clearOnFinishCallacks: boolean = false) {
+    if (clearOnFinishCallacks) {
+      this._fFns = [];
+      this._fOnceFns = [];
+    }
     if (onceTimeCallback) {
       this._fOnceFns.push(callback);
 
@@ -625,25 +661,15 @@ export class Animation {
   /*
    STATIC CLASSES
    */
-  static create(name: string): Animation {
+  static create(name: string, opts: AnimationOptions = {}): Animation {
     let AnimationClass = AnimationRegistry[name];
 
     if (!AnimationClass) {
       // couldn't find an animation by the given name
       // fallback to just the base Animation class
       AnimationClass = Animation;
     }
-    return new AnimationClass();
-  }
-
-  static createTransition(enteringView: ViewController, leavingView: ViewController, opts: any = {}): Animation {
-    let TransitionClass = AnimationRegistry[opts.animation];
-    if (!TransitionClass) {
-      // didn't find a transition animation, default to ios-transition
-      TransitionClass = AnimationRegistry['ios-transition'];
-    }
-
-    return new TransitionClass(enteringView, leavingView, opts);
+    return new AnimationClass(null, opts);
   }
 
   static register(name: string, AnimationClass) {
@@ -652,6 +678,16 @@ export class Animation {
 
 }
 
+export interface AnimationOptions {
+  animation?: string;
+  renderDelay?: number;
+}
+
+export interface PlayOptions {
+  duration?: number;
+  stepValue?: number;
+}
+
 const doc: any = document;
 const TRANSFORMS = [
   'translateX', 'translateY', 'translateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ',

ionic/components/action-sheet/action-sheet.ts

@@ -2,6 +2,7 @@ import {Component, Renderer, ElementRef} from 'angular2/core';
 import {NgFor, NgIf} from 'angular2/common';
 
 import {Animation} from '../../animations/animation';
+import {Transition, TransitionOptions} from '../../transitions/transition';
 import {Config} from '../../config/config';
 import {Icon} from '../icon/icon';
 import {isDefined} from '../../util/util';
@@ -272,9 +273,9 @@ class ActionSheetCmp {
 
 
 
-class ActionSheetSlideIn extends Animation {
-  constructor(enteringView, leavingView, opts) {
-    super(null, opts);
+class ActionSheetSlideIn extends Transition {
+  constructor(enteringView, leavingView, opts: TransitionOptions) {
+    super(opts);
 
     let ele = enteringView.pageRef().nativeElement;
     let backdrop = new Animation(ele.querySelector('.backdrop'));
@@ -286,12 +287,12 @@ class ActionSheetSlideIn extends Animation {
     this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(backdrop).add(wrapper);
   }
 }
-Animation.register('action-sheet-slide-in', ActionSheetSlideIn);
+Transition.register('action-sheet-slide-in', ActionSheetSlideIn);
 
 
-class ActionSheetSlideOut extends Animation {
-  constructor(enteringView, leavingView, opts) {
-    super(null, opts);
+class ActionSheetSlideOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
 
     let ele = leavingView.pageRef().nativeElement;
     let backdrop = new Animation(ele.querySelector('.backdrop'));
@@ -303,12 +304,12 @@ class ActionSheetSlideOut extends Animation {
     this.easing('cubic-bezier(.36,.66,.04,1)').duration(300).add(backdrop).add(wrapper);
   }
 }
-Animation.register('action-sheet-slide-out', ActionSheetSlideOut);
+Transition.register('action-sheet-slide-out', ActionSheetSlideOut);
 
 
-class ActionSheetMdSlideIn extends Animation {
-  constructor(enteringView, leavingView, opts) {
-    super(null, opts);
+class ActionSheetMdSlideIn extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
 
     let ele = enteringView.pageRef().nativeElement;
     let backdrop = new Animation(ele.querySelector('.backdrop'));
@@ -320,12 +321,12 @@ class ActionSheetMdSlideIn extends Animation {
     this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper);
   }
 }
-Animation.register('action-sheet-md-slide-in', ActionSheetMdSlideIn);
+Transition.register('action-sheet-md-slide-in', ActionSheetMdSlideIn);
 
 
-class ActionSheetMdSlideOut extends Animation {
-  constructor(enteringView, leavingView, opts) {
-    super(null, opts);
+class ActionSheetMdSlideOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
 
     let ele = leavingView.pageRef().nativeElement;
     let backdrop = new Animation(ele.querySelector('.backdrop'));
@@ -337,4 +338,4 @@ class ActionSheetMdSlideOut extends Animation {
     this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper);
   }
 }
-Animation.register('action-sheet-md-slide-out', ActionSheetMdSlideOut);
+Transition.register('action-sheet-md-slide-out', ActionSheetMdSlideOut);