builtin animations

ionic/animations/animation.js

@@ -1,6 +1,8 @@
 import * as util from 'ionic/util/util';
 
 
+let registry = {};
+
 export class Animation {
 
   constructor(el) {
@@ -26,7 +28,7 @@ export class Animation {
   elements(el) {
     if (el) {
       if (typeof el === 'string') {
-        el = document.querySelectorAll(ele);
+        el = document.querySelectorAll(el);
       }
 
       if (el.length) {
@@ -280,6 +282,21 @@ export class Animation {
     this._el = this._parent = this._children = this._players = null;
   }
 
+  /*
+   STATIC CLASSES
+   */
+  static create(element, name) {
+    let AnimationClass = registry[name];
+    if (!AnimationClass) {
+      AnimationClass = Animation;
+    }
+    return new AnimationClass(element);
+  }
+
+  static register(name, AnimationClass) {
+    registry[name] = AnimationClass;
+  }
+
 }
 
 class Animate {

ionic/animations/builtins.js

@@ -0,0 +1,16 @@
+
+import {Animation} from './animation';
+
+
+class SlideIn extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('cubic-bezier(0.1, 0.7, 0.1, 1)')
+      .duration(400)
+      .from('translateY', '100%')
+      .to('translateY', '0%');
+  }
+}
+
+Animation.register('slide-in', SlideIn);

ionic/components/modal/modal.js

@@ -155,16 +155,8 @@ class ModalContainer {
   constructor(elementRef: ElementRef) {
     this.domElement = elementRef.domElement;
 
-    this.animation = new Animation(this.domElement);
+    var animation = Animation.create(this.domElement, 'slide-in');
-    console.log('Animation', this.domElement);
+    animation.play();
-    var slideIn = new Animation(this.domElement);
-
-    slideIn
-      .easing('cubic-bezier(0.1, 0.7, 0.1, 1)')
-      .duration(400)
-      .from('translateY', '100%')
-      .to('translateY', '0%')
-      .play();
   }
 }
 

ionic/ionic.js

@@ -21,5 +21,7 @@ export * from 'ionic/engine/cordova/cordova'
 export * from 'ionic/engine/electron/electron'
 
 export * from 'ionic/animations/animation'
+export * from 'ionic/animations/builtins'
+
 export * from 'ionic/transitions/transition'
 export * from 'ionic/transitions/ios-transition'