From fcc515f5d707d6c537267ccd28e1b9fa76e0bed9 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Mon, 10 Oct 2016 15:47:40 +0200
Subject: [PATCH] fix(transition): ios-transition can be used in MD/WP

fixes #7171
---
 src/components/nav/test/basic/app-module.ts | 15 ++++++++++++---
 src/transitions/transition-ios.ts           | 14 +++++++++++---
 src/transitions/transition-md.ts            |  1 -
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/nav/test/basic/app-module.ts b/src/components/nav/test/basic/app-module.ts
index 9204380f55..0682c77d75 100644
--- a/src/components/nav/test/basic/app-module.ts
+++ b/src/components/nav/test/basic/app-module.ts
@@ -122,7 +122,10 @@ export class FirstPage {
   }
 
   pushPrimaryHeaderPage() {
-    this.navCtrl.push(PrimaryHeaderPage).then(() => {}, (rejectReason: string) => {
+    this.navCtrl.push(PrimaryHeaderPage, null, {
+      animate: true,
+      animation: 'ios-transition'
+    }).then(() => { }, (rejectReason: string) => {
     });
   }
 
@@ -132,12 +135,18 @@ export class FirstPage {
   }
 
   pushFullPage() {
-    this.navCtrl.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] }).catch(() => {
+    this.navCtrl.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] }, {
+      animate: true,
+      animation: 'md-transition'
+    }).catch(() => {
     });
   }
 
   pushAnother() {
-    this.navCtrl.push(AnotherPage).catch(() => {
+    this.navCtrl.push(AnotherPage, null, {
+      animate: true,
+      animation: 'wp-transition'
+    }).catch(() => {
     });
   }
 
diff --git a/src/transitions/transition-ios.ts b/src/transitions/transition-ios.ts
index bacfe6ffad..c4a6f5918c 100644
--- a/src/transitions/transition-ios.ts
+++ b/src/transitions/transition-ios.ts
@@ -5,6 +5,7 @@ import { PageTransition } from './page-transition';
 const DURATION = 500;
 const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
 const OPACITY = 'opacity';
+const TRANSFORM = 'transform';
 const TRANSLATEX = 'translateX';
 const OFF_RIGHT = '99.5%';
 const OFF_LEFT = '-33%';
@@ -139,7 +140,8 @@ export class IOSTransition extends PageTransition {
         // leaving content, forward direction
         leavingContent
           .fromTo(TRANSLATEX, CENTER, OFF_LEFT)
-          .fromTo(OPACITY, 1, OFF_OPACITY);
+          .fromTo(OPACITY, 1, OFF_OPACITY)
+          .afterClearStyles([TRANSFORM, OPACITY]);
       }
 
       if (leavingHasNavbar) {
@@ -173,7 +175,7 @@ export class IOSTransition extends PageTransition {
             // should just fade out, no sliding
             leavingNavbarBg
               .beforeClearStyles([TRANSLATEX])
-              .fromTo('opacity', 0.99, 0);
+              .fromTo(OPACITY, 0.99, 0);
 
           } else {
             // leaving navbar, back direction, and there's no entering navbar
@@ -189,7 +191,13 @@ export class IOSTransition extends PageTransition {
 
         } else {
           // leaving navbar, forward direction
-          leavingTitle.fromTo(TRANSLATEX, CENTER, OFF_LEFT);
+          leavingTitle
+            .fromTo(TRANSLATEX, CENTER, OFF_LEFT)
+            .afterClearStyles([TRANSFORM]);
+
+          leavingBackButton.afterClearStyles([OPACITY]);
+          leavingTitle.afterClearStyles([OPACITY]);
+          leavingNavbarItems.afterClearStyles([OPACITY]);
         }
       }
 
diff --git a/src/transitions/transition-md.ts b/src/transitions/transition-md.ts
index caf0ec9e8e..52deeb61b9 100644
--- a/src/transitions/transition-md.ts
+++ b/src/transitions/transition-md.ts
@@ -23,7 +23,6 @@ export class MDTransition extends PageTransition {
     if (enteringView) {
       if (backDirection) {
         this.duration(isPresent(opts.duration) ? opts.duration : 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
-        this.enteringPage.beforeClearStyles([TRANSLATEY]);
 
       } else {
         this.duration(isPresent(opts.duration) ? opts.duration : 280).easing('cubic-bezier(0.36,0.66,0.04,1)');