javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fixes #7171
This commit is contained in:
Manu Mtz.-Almeida
2016-10-10 15:47:40 +02:00
committed by Adam Bradley
parent 93616c4676
commit fcc515f5d7
3 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/nav/test/basic/app-module.ts
View File

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

14
src/transitions/transition-ios.ts
View File

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

1
src/transitions/transition-md.ts
View File

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