javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve iOS navbar transitions

Browse Source
This commit is contained in:
Adam Bradley
2015-10-17 22:57:01 -05:00
parent e47e3f8b75
commit 94c02e71b2
6 changed files with 79 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
ionic/components/nav/test/basic/index.ts
View File

@@ -4,28 +4,28 @@ import {NavParams, NavController} from 'ionic/ionic';
@Page({
template: '' +
'<ion-navbar *navbar>' +
'<ion-title><ion-segment><ion-segment-button>Friends</ion-segment-button><ion-segment-button>Enemies</ion-segment-button></ion-segment></ion-title>' +
'<ion-nav-items primary>' +
'<button><icon star></icon></button>' +
'</ion-nav-items>' +
'<ion-nav-items secondary>' +
'<button>S1</button>' +
'</ion-nav-items>' +
'</ion-navbar>' +
'<ion-content padding>' +
'<p>{{title}}</p>' +
'<p><button id="from1To2" primary (click)="push()">Push (Go to 2nd)</button></p>' +
'<p><button [nav-push]="[pushPage, {id: 42}]">Push w/ [nav-push] array (Go to 2nd)</button></p>' +
'<p><button [nav-push]="pushPage" [nav-params]="{id:40}">Push w/ [nav-push] and [nav-params] (Go to 2nd)</button></p>' +
'<p><button [nav-push]="[\'FirstPage\', {id: 22}]">Push w/ [nav-push] array and string view name (Go to 2nd)</button></p>' +
'<p><button nav-push="FirstPage" [nav-params]="{id: 23}">Push w/ nav-push and [nav-params] (Go to 2nd)</button></p>' +
'<p><button (click)="setViews()">setViews() (Go to 3rd, no history)</button></p>' +
'<icon class="ion-ios-arrow-back"></icon>' +
'<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
'<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
'</ion-content>'
template: `
<ion-navbar *navbar>
<ion-title><ion-segment><ion-segment-button>Friends</ion-segment-button><ion-segment-button>Enemies</ion-segment-button></ion-segment></ion-title>
<ion-nav-items primary>
<button><icon star></icon></button>
</ion-nav-items>
<ion-nav-items secondary>
<button>S1</button>
</ion-nav-items>
</ion-navbar>
<ion-content padding>
<p>{{title}}</p>
<p><button id="from1To2" primary (click)="push()">Push (Go to 2nd)</button></p>
<p><button [nav-push]="[pushPage, {id: 42}]">Push w/ [nav-push] array (Go to 2nd)</button></p>
<p><button [nav-push]="pushPage" [nav-params]="{id:40}">Push w/ [nav-push] and [nav-params] (Go to 2nd)</button></p>
<p><button [nav-push]="[\'FirstPage\', {id: 22}]">Push w/ [nav-push] array and string view name (Go to 2nd)</button></p>
<p><button nav-push="FirstPage" [nav-params]="{id: 23}">Push w/ nav-push and [nav-params] (Go to 2nd)</button></p>
<p><button (click)="setViews()">setViews() (Go to 3rd, no history)</button></p>
<icon class="ion-ios-arrow-back"></icon>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>`
})
class FirstPage {
constructor(
@@ -101,11 +101,10 @@ class SecondPage {
template: `
<ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
<ion-content padding>
<p>
<button id="from3To2" (click)="pop()">Pop (Go back to 2nd)</button>
<button id="insert" (click)="insert()">Insert first page into history before this</button>
<button id="remove" (click)="removeSecond()">Remove second page in history</button>
</p>
<p><button (click)="push()">Push (Go to 4th)</button></p>
<p><button id="from3To2" (click)="pop()">Pop (Go back to 2nd)</button></p>
<p><button id="insert" (click)="insert()">Insert first page into history before this</button></p>
<p><button id="remove" (click)="removeSecond()">Remove second page in history</button></p>
<div class="yellow"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
</ion-content>
`
@@ -117,6 +116,10 @@ class ThirdPage {
this.nav = nav
}
push() {
this.nav.push(FourthPage);
}
pop() {
this.nav.pop()
}
@@ -132,9 +135,29 @@ class ThirdPage {
}
@Page({
template: `
<ion-navbar *navbar><ion-title>Fourth Page Header</ion-title></ion-navbar>
<ion-content padding>
<p>
<button (click)="nav.pop()">Pop (Go back to 3rd)</button>
</p>
</ion-content>
`
})
class FourthPage {
constructor(
nav: NavController
) {
this.nav = nav
}
}
@App({
template: '<ion-nav [root]="root"></ion-nav>',
template: `
<ion-nav [root]="root"></ion-nav>
`,
views: [FirstPage, SecondPage, ThirdPage]
})
class E2EApp {

6
ionic/components/nav/test/routing/index.ts
View File

@@ -45,9 +45,9 @@ class View3Cmp {
@App()
@RouteConfig([
{ path: '/', component: View1Cmp, as: 'first' },
{ path: '/second', component: View2Cmp, as: 'second' },
{ path: '/third/:id', component: View3Cmp, as: 'third' }
{ path: '/', component: View1Cmp, as: 'First' },
{ path: '/2', component: View2Cmp, as: 'Second' },
{ path: '/3/:id', component: View3Cmp, as: 'Third' }
])
class InboxApp {
constructor(location: Location) {

4
ionic/components/nav/test/routing/view1.html
View File

@@ -17,9 +17,9 @@
ViewController Id: {{viewCtrl.id}}
</h4>
<p>
<a href="#/second">Second View via href</a>
<a href="#/2">Second View via href</a>
</p>
<p>
<a href="#/third/3">Third View via href, 3 as id param</a>
<a href="#/3/151">Third View via href, 151 as id param</a>
</p>
</ion-content>

2
ionic/components/nav/test/routing/view2.html
View File

@@ -19,7 +19,7 @@
ViewController Id: {{viewCtrl.id}}
</h4>
<p>
<a href="#/third/12">Third View via href, 12 as id param</a>
<a href="#/3/27">Third View via href, 27 as id param</a>
</p>
<p>
<a href="#/">First View via href</a>

2
ionic/components/nav/test/routing/view3.html
View File

@@ -17,7 +17,7 @@
ViewController Id: {{viewCtrl.id}}
</h4>
<p>
<a href="#/second">Second View via href</a>
<a href="#/2">Second View via href</a>
</p>
<p>
<a href="#/">First View via href</a>

24
ionic/transitions/ios-transition.ts
View File

@@ -78,7 +78,7 @@ class IOSTransition extends Animation {
if (backDirection) {
// back direction
enteringTitle.fromTo(TRANSLATEX, OFF_LEFT, CENTER);
enteringNavbarBg.fromTo(TRANSLATEX, OFF_LEFT, CENTER);
if (enteringView.enableBack()) {
enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
enteringBackButton.fadeIn();
@@ -87,7 +87,6 @@ class IOSTransition extends Animation {
} else {
// forward direction
enteringTitle.fromTo(TRANSLATEX, OFF_RIGHT, CENTER);
enteringNavbarBg.fromTo(TRANSLATEX, OFF_RIGHT, CENTER);
if (enteringView.enableBack()) {
enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
@@ -97,6 +96,17 @@ class IOSTransition extends Animation {
enteringBackBtnText.fromTo(TRANSLATEX, '150px', '0px');
enteringNavBar.add(enteringBackBtnText);
}
if (leavingHasNavbar) {
// if there is a leaving navbar, then just fade this one in
enteringNavbarBg
.fromTo(TRANSLATEX, CENTER, CENTER)
.fadeIn();
} else {
enteringNavbarBg.fromTo(TRANSLATEX, OFF_RIGHT, CENTER);
}
}
}
@@ -146,7 +156,15 @@ class IOSTransition extends Animation {
if (backDirection) {
// back direction
leavingTitle.fromTo(TRANSLATEX, CENTER, '100%');
leavingNavbarBg.fromTo(TRANSLATEX, CENTER, '100%');
if (enteringHasNavbar) {
// this is an entering navbar, just fade this out
leavingNavbarBg
.fromTo(TRANSLATEX, CENTER, CENTER)
.fadeOut();
} else {
leavingNavbarBg.fromTo(TRANSLATEX, CENTER, '100%');
}
let leavingBackBtnText = new Animation(leavingView.backBtnTextRef());
leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (300) + 'px');