fix modal animations

ionic/components/modal/modal.js

@@ -4,6 +4,12 @@ import {Animation} from '../../animations/animation';
 
 export class Modal extends Overlay {
 
+  static get config() {
+    return {
+      selector: 'ion-modal'
+    }
+  }
+
   constructor() {
     super();
     this.extendOptions({
@@ -17,38 +23,30 @@ export class Modal extends Overlay {
     return this.create(ComponentType, opts);
   }
 
-  static get config() {
-    return {
-      selector: 'ion-modal'
-    }
-  }
-
 }
 
 
 /**
  * Animations for modals
  */
-class ModalAnimation extends Animation {
-  constructor(element) {
-    super(element);
-    this.easing('cubic-bezier(.36, .66, .04, 1)').duration(400);
-  }
-}
-
-class ModalSlideIn extends ModalAnimation {
+class ModalSlideIn extends Animation {
   constructor(element) {
     super(element);
     this
+      .easing('cubic-bezier(.36,.66,.04,1)')
+      .duration(400)
       .fromTo('translateY', '100%', '0%');
   }
 }
 Animation.register('modal-slide-in', ModalSlideIn);
 
-class ModalSlideOut extends ModalAnimation {
+
+class ModalSlideOut extends Animation {
   constructor(element) {
     super(element);
     this
+      .easing('ease-out')
+      .duration(250)
       .fromTo('translateY', '0%', '100%');
   }
 }

ionic/components/modal/modal.scss

@@ -28,6 +28,9 @@ ion-modal {
   background-color: $modal-bg-color;
 
   transform: translate3d(0px, 100%, 0px);
+  &.show-overlay {
+    transform: translate3d(0px, 0px, 0px);
+  }
 }
 
 

ionic/components/modal/test/basic/index.js

@@ -7,7 +7,32 @@ import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {IonicView} from 'ionic/ionic';
 
 import {IonicComponent} from 'ionic/ionic';
-import {Modal, NavController, NavParams} from 'ionic/ionic';
+import {Modal, NavController, NavParams, Animation} from 'ionic/ionic';
+
+
+class FadeIn extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(450)
+      .fadeIn();
+  }
+}
+
+Animation.register('my-fade-in', FadeIn);
+
+class FadeOut extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(250)
+      .fadeOut();
+  }
+}
+
+Animation.register('my-fade-out', FadeOut);
 
 
 @Component({ selector: 'ion-view' })
@@ -16,7 +41,10 @@ import {Modal, NavController, NavParams} from 'ionic/ionic';
 })
 class IonicApp {
   openModal() {
-    Modal.open(ContactModal);
+    Modal.open(ContactModal, {
+      enterAnimation: 'my-fade-in',
+      leaveAnimation: 'my-fade-out'
+    });
   }
 }
 
@@ -31,6 +59,7 @@ export class ContactModal extends Modal {
   }
 }
 
+
 @Component({selector: 'ion-view'})
 @IonicView({
   template: `