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

that whole nav overhaul thing again

Browse Source
This commit is contained in:
Adam Bradley
2015-05-28 10:19:28 -05:00
parent 2d8a6d9079
commit d827279a4f
36 changed files with 414 additions and 394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,5 @@
import {Animation} from '../animations/animation';
import {rafPromise} from '../util/dom';
import {Transition} from './transition';
import {Animation} from '../animations/animation';
const DURATION = 500;
@@ -14,128 +13,89 @@ const OFF_LEFT = '-33%';
const CENTER = '0%'
const OFF_OPACITY = 0.8;
const SHOW_TOOLBAR_CSS = 'show-toolbar';
const SHOW_NAV_ITEM_CSS = 'show-nav-item';
class IOSTransition extends Animation {
class IOSTransition extends Transition {
constructor(navCtrl, opts) {
super();
super(navCtrl);
// global duration and easing for all child animations
this.duration(DURATION);
this.easing(EASING);
// get the entering and leaving items
let enteringItem = navCtrl.getStagedEnteringItem();
let leavingItem = navCtrl.getStagedLeavingItem();
// create animation for the entering content
let enteringContent = new Animation(enteringItem.contentElement());
// create animation for the entering toolbars
let enteringToolbars = new Animation(enteringItem.toolbarElements());
// create animation for the entering title element
let enteringTitle = new Animation(enteringItem.titleElement());
// create animation for the leaving content
// leavingItem could be null, but the animation instance knows to do nothing
let leavingContent = new Animation(leavingItem && leavingItem.contentElement());
// create animation for the leaving content
// leavingItem could be null, but the animation instance knows to do nothing
let leavingToolbars = new Animation(leavingItem && leavingItem.toolbarElements());
// create animation for the entering title element
let leavingTitle = new Animation(leavingItem && leavingItem.titleElement());
// entering item moves to center
// before starting, set enteringItem to display: block
enteringContent
.beforePlay.addClass(SHOW_NAV_ITEM_CSS)
this.enteringContent
.to(TRANSLATEX, CENTER)
.to(OPACITY, 1);
enteringTitle
this.enteringTitle
.from(OPACITY, 0)
.to(OPACITY, 1)
.to(TRANSLATEX, CENTER);
enteringToolbars
.beforePlay.addClass(SHOW_TOOLBAR_CSS);
// if the back button should show, then fade it in
if (enteringItem.enableBack) {
let enteringBackButton = new Animation(enteringItem.backButtonElement())
enteringBackButton.from(OPACITY, 0).to(OPACITY, 1);
this.addChild(enteringBackButton);
if (this.entering.enableBack) {
let enteringBackButton = new Animation(this.entering.backButtonElement())
enteringBackButton
.from(OPACITY, 0)
.to(OPACITY, 1);
this.addAnimation(enteringBackButton);
}
// leaving view moves off screen
// when completed, set leavingItem to display: none
leavingContent
.afterFinish.removeClass(SHOW_NAV_ITEM_CSS)
// when completed, set leaving to display: none
this.leavingContent
.from(TRANSLATEX, CENTER)
.from(OPACITY, 1);
leavingToolbars
.afterFinish.removeClass(SHOW_TOOLBAR_CSS);
leavingTitle
this.leavingTitle
.from(TRANSLATEX, CENTER)
.from(OPACITY, 1);
if (leavingItem) {
let leavingBackButton = new Animation(leavingItem.backButtonElement());
leavingBackButton.from(OPACITY, 1).to(OPACITY, 0);
this.addChild(leavingBackButton);
}
let leavingBackButton = new Animation(this.leaving.backButtonElement());
leavingBackButton
.from(OPACITY, 1)
.to(OPACITY, 0);
this.addAnimation(leavingBackButton);
// set properties depending on direction
if (opts.direction === 'back') {
// back direction
enteringContent
this.enteringContent
.from(TRANSLATEX, OFF_LEFT)
.from(OPACITY, OFF_OPACITY)
.to(OPACITY, 1);
enteringTitle
this.enteringTitle
.from(TRANSLATEX, OFF_LEFT);
leavingContent
this.leavingContent
.to(TRANSLATEX, OFF_RIGHT)
.to(OPACITY, 1);
leavingTitle
this.leavingTitle
.to(TRANSLATEX, OFF_RIGHT)
.to(OPACITY, 0);
} else {
// forward direction
enteringContent
this.enteringContent
.from(TRANSLATEX, OFF_RIGHT)
.from(OPACITY, 1);
enteringTitle
this.enteringTitle
.from(TRANSLATEX, OFF_RIGHT);
leavingContent
this.leavingContent
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, OFF_OPACITY);
leavingTitle
this.leavingTitle
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, 0);
}
// set child animations
this.children(enteringContent, enteringToolbars, enteringTitle, leavingContent, leavingToolbars, leavingTitle);
}
stage() {
return rafPromise();
}
}

19
ionic/transitions/none-transition.js
View File

@@ -1,19 +0,0 @@
import {Animation} from '../animations/animation';
import {Transition} from './transition';
import {rafPromise} from '../util/dom';
class NoneTransition extends Animation {
constructor(navCtrl) {
super();
}
stage() {
// immediately resolve
return rafPromise();
}
}
Transition.register('none', NoneTransition);

71
ionic/transitions/transition.js
View File

@@ -1,23 +1,80 @@
import {Animation} from '../animations/animation';
import {rafPromise} from '../util/dom';
const SHOW_NAVBAR_CSS = 'show-navbar';
const SHOW_VIEW_CSS = 'show-view';
let registry = {};
class TransitionController {
export class Transition extends Animation {
create(navCtrl, opts = {}) {
constructor(navCtrl) {
super();
// get the entering and leaving items
let enteringItem = this.entering = navCtrl.getStagedEnteringItem();
let leavingItem = this.leaving = navCtrl.getStagedLeavingItem();
// create animation for the entering item's "ion-view" element
this.enteringView = new Animation(enteringItem.viewElement());
this.enteringView.beforePlay.addClass(SHOW_VIEW_CSS);
// create animation for the entering item's "ion-navbar" element
this.enteringNavbar = new Animation(enteringItem.navbarElement());
this.enteringNavbar.beforePlay.addClass(SHOW_NAVBAR_CSS);
// create animation for the entering item's "ion-content" element
this.enteringContent = new Animation(enteringItem.contentElement());
// create animation for the entering item's "ion-title" element
this.enteringTitle = new Animation(enteringItem.titleElement());
this.addAnimation(this.enteringView, this.enteringNavbar, this.enteringContent, this.enteringTitle);
if (leavingItem) {
// create animation for the entering item's "ion-view" element
this.leavingView = new Animation(leavingItem.viewElement());
this.leavingView.afterFinish.removeClass(SHOW_VIEW_CSS);
// create animation for the entering item's "ion-navbar" element
this.leavingNavbar = new Animation(leavingItem.navbarElement());
this.leavingNavbar.afterFinish.removeClass(SHOW_NAVBAR_CSS);
// create animation for the leaving item's "ion-content" element
this.leavingContent = new Animation(leavingItem.contentElement());
// create animation for the leaving item's "ion-title" element
this.leavingTitle = new Animation(leavingItem.titleElement());
this.addAnimation(this.leavingView, this.leavingNavbar, this.leavingContent, this.leavingTitle);
}
}
stage() {
return rafPromise();
}
/*
STATIC CLASSES
*/
static create(navCtrl, opts = {}) {
let name = opts.animation || 'ios';
let TransitionClass = registry[name];
if (!TransitionClass) {
TransitionClass = registry['none'];
// transition wasn't found, default to a 'none' transition
// which doesn't animate anything, just shows and hides
TransitionClass = Transition;
}
return new TransitionClass(navCtrl, opts);
}
register(name, transitionClass) {
registry[name] = transitionClass;
static register(name, TransitionClass) {
registry[name] = TransitionClass;
}
}
export let Transition = new TransitionController();