Modal slide

ionic/components/modal/modal.js

@@ -9,6 +9,8 @@ import {Parent} from 'angular2/src/core/annotations_impl/visibility';
 
 import {raf, ready} from 'ionic/util/dom'
 
+import {Animation} from '../../animations/animation';
+
 @Component({
   selector: 'ion-modal-wrapper'
 })
@@ -150,7 +152,19 @@ export class Modal {
   directives: [ModalContent]
 })
 class ModalContainer {
-  constructor() {
+  constructor(elementRef: ElementRef) {
+    this.domElement = elementRef.domElement;
+
+    this.animation = new Animation(this.domElement);
+    console.log('Animation', this.domElement);
+    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/components/modal/test/basic/index.js

@@ -28,7 +28,9 @@ class IonicApp {
 
   openModal() {
     console.log('Opening modal');
+
     Modal.show(ContactModal, this.loader, this.injector, this.domRenderer, this.elementRef);
+
   }
 }
 
@@ -36,12 +38,15 @@ class IonicApp {
   selector: 'contact-modal'
 })
 @View({
-  //template: '<ion-content padding><button primary (click)="close()">Close</button></ion-content>',//<ion-nav [initial]="initial"></ion-nav>',
+  //template: '<ion-content padding><button primary (click)="close()">Close</button></ion-content>',//
+  template: '<ion-nav [initial]="initial"></ion-nav>',
+  /*
   template: `
       <p>First Page: {{ val }}</p>
       <p>
       <button primary (click)="close()">Close</button>
       </p>`,
+      */
   directives: [Nav, Button, Content]
 })
 export class ContactModal {
@@ -81,10 +86,10 @@ export class ContactModal {
 })
 export class ModalFirstPage {
   constructor(
-    @Parent() modal: ContactModal,
+    //@Parent() modal: ContactModal,
     nav: NavController
   ) {
-    this.modal = modal;
+    //this.modal = modal;
     this.nav = nav;
     this.val = Math.round(Math.random() * 8999) + 1000;
   }