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

refactor(navbar): improved navbar transitions

Browse Source
This commit is contained in:
Adam Bradley
2015-09-23 23:17:06 -05:00
parent 97955927c8
commit 88eaa45f4c
14 changed files with 71 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,6 +32,9 @@ class IOSTransition extends Transition {
.fadeIn()
.to(TRANSLATEX, CENTER);
this.enteringNavbarBackground
.to(TRANSLATEX, CENTER);
// leaving view moves off screen
this.leavingView
.from(TRANSLATEX, CENTER)
@@ -42,6 +45,9 @@ class IOSTransition extends Transition {
.from(TRANSLATEX, CENTER)
.from(OPACITY, 1);
this.leavingNavbarBackground
.from(TRANSLATEX, CENTER);
// set properties depending on direction
if (opts.direction === 'back') {
// back direction
@@ -53,9 +59,8 @@ class IOSTransition extends Transition {
this.enteringTitle
.from(TRANSLATEX, OFF_LEFT);
this.leavingNavbar
.before.addClass('transparent-navbar')
.after.removeClass('transparent-navbar');
this.enteringNavbarBackground
.from(TRANSLATEX, OFF_LEFT);
this.leavingView
.to(TRANSLATEX, '100%')
@@ -65,6 +70,9 @@ class IOSTransition extends Transition {
.to(TRANSLATEX, '100%')
.to(OPACITY, 0);
this.leavingNavbarBackground
.to(TRANSLATEX, '100%');
if (this.leaving.enableBack() && this.viewWidth() > 200) {
let leavingBackButtonText = new Animation(this.leaving.backBtnTextRef());
leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px');
@@ -77,13 +85,12 @@ class IOSTransition extends Transition {
.from(TRANSLATEX, '99.5%')
.from(OPACITY, 1);
this.enteringNavbar
.before.addClass('transparent-navbar')
.after.removeClass('transparent-navbar');
this.enteringTitle
.from(TRANSLATEX, '99.5%');
this.enteringNavbarBackground
.from(TRANSLATEX, '99.5%');
this.leavingView
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, OFF_OPACITY);
@@ -92,6 +99,9 @@ class IOSTransition extends Transition {
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, 0);
this.leavingNavbarBackground
.to(TRANSLATEX, OFF_LEFT);
if (this.entering.enableBack() && this.viewWidth() > 200) {
let enteringBackButtonText = new Animation(this.entering.backBtnTextRef());
enteringBackButtonText.fromTo(TRANSLATEX, (this.viewWidth() / 2) + 'px', CENTER);

12
ionic/transitions/transition.ts
View File

@@ -46,8 +46,10 @@ export class Transition extends Animation {
this.add(enteringNavbar);
this.enteringNavbarItems = new Animation(enteringView.navbarItemRefs());
this.enteringNavbarItems.fadeIn();
enteringNavbar.add(this.enteringNavbarItems);
enteringNavbar.add(this.enteringNavbarItems.fadeIn());
this.enteringNavbarBackground = new Animation(enteringView.navbarBackgroundRef());
enteringNavbar.add(this.enteringNavbarBackground);
}
@@ -69,8 +71,10 @@ export class Transition extends Animation {
leavingNavbar.add(this.leavingTitle);
this.leavingNavbarItems = new Animation(leavingView.navbarItemRefs());
this.leavingNavbarItems.fadeOut();
leavingNavbar.add(this.leavingNavbarItems);
leavingNavbar.add(this.leavingNavbarItems.fadeOut());
this.leavingNavbarBackground = new Animation(leavingView.navbarBackgroundRef());
leavingNavbar.add(this.leavingNavbarBackground);
this.add(this.leavingView, leavingNavbar);
}