feat(modals): mode transitions

ionic/components/modal/modal.ts

@@ -12,11 +12,11 @@ import * as util from 'ionic/util';
  * @usage
  * ```ts
  * class MyApp {
- * 
+ *
  *  constructor(modal: Modal, app: IonicApp, ionicConfig: IonicConfig) {
  *    this.modal = modal;
  *  }
- * 
+ *
  *  openModal() {
  *    this.modal.open(ContactModal, {
  *      enterAnimation: 'my-fade-in',
@@ -38,8 +38,8 @@ export class Modal extends Overlay {
    */
   open(ComponentType: Type, opts={}) {
     let defaults = {
-      enterAnimation: 'modal-slide-in',
+      enterAnimation: this.config.setting('modalEnter') || 'modal-slide-in',
-      leaveAnimation: 'modal-slide-out',
+      leaveAnimation: this.config.setting('modalLeave') || 'modal-slide-out',
     };
 
     return this.create(OVERLAY_TYPE, ComponentType, util.extend(defaults, opts));
@@ -69,7 +69,7 @@ class ModalSlideIn extends Animation {
   constructor(element) {
     super(element);
     this
-      .easing('cubic-bezier(.36,.66,.04,1)')
+      .easing('cubic-bezier(0.36,0.66,0.04,1)')
       .duration(400)
       .fromTo('translateY', '100%', '0%');
   }
@@ -87,3 +87,29 @@ class ModalSlideOut extends Animation {
   }
 }
 Animation.register('modal-slide-out', ModalSlideOut);
+
+
+class ModalMDSlideIn extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('cubic-bezier(0.36,0.66,0.04,1)')
+      .duration(280)
+      .fromTo('translateY', '40px', '0px')
+      .fadeIn();
+  }
+}
+Animation.register('modal-md-slide-in', ModalMDSlideIn);
+
+
+class ModalMDSlideOut extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .duration(200)
+      .easing('cubic-bezier(0.47,0,0.745,0.715)')
+      .fromTo('translateY', '0px', '40px')
+      .fadeOut();
+  }
+}
+Animation.register('modal-md-slide-out', ModalMDSlideOut);

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

@@ -33,6 +33,10 @@ class MyAppCmp {
   }
 
   openModal() {
+    this.modal.open(ContactModal);
+  }
+
+  openModalCustomAnimation() {
     this.modal.open(ContactModal, {
       enterAnimation: 'my-fade-in',
       leaveAnimation: 'my-fade-out',

ionic/components/modal/test/basic/main.html

@@ -1,3 +1,9 @@
+
 <ion-content padding>
-  <button class="e2eOpenModal" (click)="openModal()">Open Modal</button>
+  <button class="e2eOpenModal" (click)="openModal()">Modal: Default Animation</button>
 </ion-content>
+
+<ion-content padding>
+  <button (click)="openModalCustomAnimation()">Modal: Custom Animation</button>
+</ion-content>
+

ionic/config/modes.ts

@@ -15,6 +15,9 @@ IonicConfig.modeConfig('ios', {
 
   iconMode: 'ios',
 
+  modalEnter: 'modal-slide-in',
+  modalLeave: 'modal-slide-out',
+
   tabBarPlacement: 'bottom',
   viewTransition: 'ios',
 
@@ -34,6 +37,9 @@ IonicConfig.modeConfig('md', {
 
   iconMode: 'md',
 
+  modalEnter: 'modal-md-slide-in',
+  modalLeave: 'modal-md-slide-out',
+
   tabBarPlacement: 'top',
   viewTransition: 'md',