From 079f3d8ba7c6edfd9979b86aaed955497090eed6 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Thu, 29 Sep 2016 00:49:22 +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 75fe264b631..9bf7ae3bdf7 100644 --- a/src/components/nav/test/basic/app-module.ts +++ b/src/components/nav/test/basic/app-module.ts @@ -120,17 +120,26 @@ export class FirstPage { } pushPrimaryHeaderPage() { - this.navCtrl.push(PrimaryHeaderPage).then(() => {}, (rejectReason: string) => { + this.navCtrl.push(PrimaryHeaderPage, null, { + animate: true, + animation: 'ios-transition' + }).then(() => { }, (rejectReason: string) => { }); } 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 bacfe6ffadf..c4a6f5918cc 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 caf0ec9e8ee..52deeb61b9a 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)');