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

tabs navbar updates

Browse Source
This commit is contained in:
Adam Bradley
2015-06-14 23:55:48 -05:00
parent 8676deb325
commit a1d0f2c69e
8 changed files with 144 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ionic/transitions/ios-transition.js
View File

@@ -19,63 +19,61 @@ class IOSTransition extends Transition {
constructor(nav, opts) {
super(nav, opts);
const self = this;
// global duration and easing for all child animations
self.duration(DURATION);
self.easing(EASING);
this.duration(DURATION);
this.easing(EASING);
// entering item moves to center
self.enteringView
this.enteringView
.to(TRANSLATEX, CENTER)
.to(OPACITY, 1);
self.enteringTitle
this.enteringTitle
.fadeIn()
.to(TRANSLATEX, CENTER);
// leaving view moves off screen
self.leavingView
this.leavingView
.from(TRANSLATEX, CENTER)
.from(OPACITY, 1);
self.leavingTitle
this.leavingTitle
.from(TRANSLATEX, CENTER)
.from(OPACITY, 1);
// set properties depending on direction
if (opts.direction === 'back') {
// back direction
self.enteringView
this.enteringView
.from(TRANSLATEX, OFF_LEFT)
.from(OPACITY, OFF_OPACITY)
.to(OPACITY, 1);
self.enteringTitle
this.enteringTitle
.from(TRANSLATEX, OFF_LEFT);
self.leavingView
this.leavingView
.to(TRANSLATEX, OFF_RIGHT)
.to(OPACITY, 1);
self.leavingTitle
this.leavingTitle
.to(TRANSLATEX, OFF_RIGHT)
.to(OPACITY, 0);
} else {
// forward direction
self.enteringView
this.enteringView
.from(TRANSLATEX, '99%')
.from(OPACITY, 1);
self.enteringTitle
this.enteringTitle
.from(TRANSLATEX, '97%');
self.leavingView
this.leavingView
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, OFF_OPACITY);
self.leavingTitle
this.leavingTitle
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, 0);
}

49
ionic/transitions/transition.js
View File

@@ -12,60 +12,59 @@ export class Transition extends Animation {
constructor(nav, opts) {
super();
const self = this;
// get the entering and leaving items
let enteringItem = self.entering = nav.getStagedEnteringItem();
let leavingItem = self.leaving = nav.getStagedLeavingItem();
let enteringItem = this.entering = nav.getStagedEnteringItem();
let leavingItem = this.leaving = nav.getStagedLeavingItem();
// create animation for the entering item's "ion-view" element
self.enteringView = new Animation(enteringItem.viewElement());
self.enteringView.before.addClass(SHOW_VIEW_CSS);
self.add(self.enteringView);
this.enteringView = new Animation(enteringItem.viewElement());
this.enteringView.before.addClass(SHOW_VIEW_CSS);
this.add(this.enteringView);
if (opts.navbar !== false) {
let enteringNavbar = self.enteringNavbar = new Animation(enteringItem.navbarElement());
let enteringNavbar = this.enteringNavbar = new Animation(enteringItem.navbarElement());
enteringNavbar.before.addClass(SHOW_NAVBAR_CSS);
if (enteringItem.enableBack) {
// only animate in the back button if the entering view has it enabled
let enteringBackButton = self.enteringBackButton = new Animation(enteringItem.backButtonElement());
let enteringBackButton = this.enteringBackButton = new Animation(enteringItem.backButtonElement());
enteringBackButton
.before.addClass(SHOW_BACK_BUTTON)
.fromTo('opacity', 0.02, 1)
enteringNavbar.add(enteringBackButton);
}
self.enteringTitle = new Animation(enteringItem.titleElement());
enteringNavbar.add(self.enteringTitle);
self.add(enteringNavbar);
this.enteringTitle = new Animation(enteringItem.titleElement());
enteringNavbar.add(this.enteringTitle);
this.add(enteringNavbar);
self.enteringNavbarItems = new Animation(enteringItem.navbarItemElements())
self.enteringNavbarItems.fromTo('opacity', 0.02, 1)
enteringNavbar.add(self.enteringNavbarItems);
this.enteringNavbarItems = new Animation(enteringItem.navbarItemElements())
this.enteringNavbarItems.fromTo('opacity', 0.02, 1)
enteringNavbar.add(this.enteringNavbarItems);
}
if (leavingItem) {
self.leavingView = new Animation(leavingItem.viewElement());
self.leavingView.after.removeClass(SHOW_VIEW_CSS);
this.leavingView = new Animation(leavingItem.viewElement());
this.leavingView.after.removeClass(SHOW_VIEW_CSS);
let leavingNavbar = self.leavingNavbar = new Animation(leavingItem.navbarElement());
let leavingNavbar = this.leavingNavbar = new Animation(leavingItem.navbarElement());
leavingNavbar.after.removeClass(SHOW_NAVBAR_CSS);
let leavingBackButton = self.leavingBackButton = new Animation(leavingItem.backButtonElement());
let leavingBackButton = this.leavingBackButton = new Animation(leavingItem.backButtonElement());
leavingBackButton
.after.removeClass(SHOW_BACK_BUTTON)
.fadeOut();
leavingNavbar.add(leavingBackButton);
self.leavingTitle = new Animation(leavingItem.titleElement());
leavingNavbar.add(self.leavingTitle);
this.leavingTitle = new Animation(leavingItem.titleElement());
leavingNavbar.add(this.leavingTitle);
self.leavingNavbarItems = new Animation(leavingItem.navbarItemElements())
self.leavingNavbarItems.fadeOut();
leavingNavbar.add(self.leavingNavbarItems);
this.leavingNavbarItems = new Animation(leavingItem.navbarItemElements())
this.leavingNavbarItems.fadeOut();
leavingNavbar.add(this.leavingNavbarItems);
self.add(self.leavingView, leavingNavbar);
this.add(this.leavingView, leavingNavbar);
}
}