fix(transition): ios-transition can be used in MD/WP

fixes #7171

Author: manucorporat

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(() => {
     });
   }
 

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]);
         }
       }
 

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)');