fix(modal): using cross mode animations

fixes #9323
ionic-team · Nov 30, 2016 · ccb6bf1 · ccb6bf1
1 parent 3fd9a20
commit ccb6bf1
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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() {