From ccb6bf13909e639c6391bd5dded386b57317d0a2 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Wed, 30 Nov 2016 13:30:28 +0100
Subject: [PATCH] fix(modal): using cross mode animations

fixes #9323
---
 src/animations/animation.ts                   |  3 ++-
 src/components/modal/modal-options.ts         |  2 ++
 src/components/modal/modal-transitions.ts     |  4 +++-
 src/components/modal/modal.ts                 | 20 +++++++++++++++++--
 src/components/modal/test/basic/app-module.ts | 10 ++++++++--
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/animations/animation.ts b/src/animations/animation.ts
index bcedd9a872b..a3618d115e5 100644
--- a/src/animations/animation.ts
+++ b/src/animations/animation.ts
@@ -39,7 +39,8 @@ export class Animation {
   hasCompleted: boolean = false;
 
   constructor(ele?: any, opts?: AnimationOptions, raf?: Function) {
-    this.element(ele).opts = opts;
+    this.element(ele);
+    this.opts = opts;
     this._raf = raf || nativeRaf;
   }
 
diff --git a/src/components/modal/modal-options.ts b/src/components/modal/modal-options.ts
index 255b54c6ff3..02e7985f159 100644
--- a/src/components/modal/modal-options.ts
+++ b/src/components/modal/modal-options.ts
@@ -2,4 +2,6 @@
 export interface ModalOptions {
   showBackdrop?: boolean;
   enableBackdropDismiss?: boolean;
+  enterAnimation?: string;
+  leaveAnimation?: string;
 }
diff --git a/src/components/modal/modal-transitions.ts b/src/components/modal/modal-transitions.ts
index 263ea136050..26299368128 100644
--- a/src/components/modal/modal-transitions.ts
+++ b/src/components/modal/modal-transitions.ts
@@ -14,9 +14,11 @@ export class ModalSlideIn extends PageTransition {
     const backdrop = new Animation(backdropEle);
     const wrapper = new Animation(ele.querySelector('.modal-wrapper'));
 
-    backdrop.fromTo('opacity', 0.01, 0.4);
+    wrapper.beforeStyles({ 'opacity': 1 });
     wrapper.fromTo('translateY', '100%', '0%');
 
+    backdrop.fromTo('opacity', 0.01, 0.4);
+
     this
       .element(this.enteringView.pageRef())
       .easing('cubic-bezier(0.36,0.66,0.04,1)')
diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts
index 63e193e8e2a..0290da474f0 100644
--- a/src/components/modal/modal.ts
+++ b/src/components/modal/modal.ts
@@ -14,6 +14,8 @@ import { ViewController } from '../../navigation/view-controller';
  */
 export class Modal extends ViewController {
   private _app: App;
+  private _enterAnimation: string;
+  private _leaveAnimation: string;
 
   constructor(app: App, component: any, data: any, opts: ModalOptions = {}) {
     data = data || {};
@@ -24,14 +26,28 @@ export class Modal extends ViewController {
 
     super(ModalCmp, data, null);
     this._app = app;
+    this._enterAnimation = opts.enterAnimation;
+    this._leaveAnimation = opts.leaveAnimation;
+
     this.isOverlay = true;
   }
 
   /**
    * @private
    */
-  getTransitionName(direction: string) {
-    let key = (direction === 'back' ? 'modalLeave' : 'modalEnter');
+  getTransitionName(direction: string): string {
+    let key: string;
+    if (direction === 'back') {
+      if (this._leaveAnimation) {
+        return this._leaveAnimation;
+      }
+      key = 'modalLeave';
+    } else {
+      if (this._enterAnimation) {
+        return this._enterAnimation;
+      }
+      key = 'modalEnter';
+    }
     return this._nav && this._nav.config.get(key);
   }
 
diff --git a/src/components/modal/test/basic/app-module.ts b/src/components/modal/test/basic/app-module.ts
index 7684d537a5a..a8eb70ab9bc 100644
--- a/src/components/modal/test/basic/app-module.ts
+++ b/src/components/modal/test/basic/app-module.ts
@@ -67,7 +67,10 @@ export class E2EPage {
   }
 
   presentModal() {
-    let modal = this.modalCtrl.create(ModalPassData, { userId: 8675309 });
+    let modal = this.modalCtrl.create(ModalPassData, { userId: 8675309 }, {
+      enterAnimation: 'modal-slide-in',
+      leaveAnimation: 'modal-slide-out'
+    });
     modal.present();
 
     modal.onWillDismiss((data: any) => {
@@ -87,7 +90,10 @@ export class E2EPage {
   }
 
   presentToolbarModal() {
-    this.modalCtrl.create(ToolbarModal).present();
+    this.modalCtrl.create(ToolbarModal, null, {
+      enterAnimation: 'modal-md-slide-in',
+      leaveAnimation: 'modal-md-slide-out'
+    }).present();
   }
 
   presentModalWithInputs() {