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

feat(transitions): md navbar transition

Browse Source
This commit is contained in:
Adam Bradley
2015-09-06 23:13:05 -05:00
parent 3c4d36b835
commit 71d60159ea
2 changed files with 21 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ionic/animations/animation.ts
View File

@ -155,7 +155,7 @@ export class Animation {
} }
fadeIn() { fadeIn() {
return this.fromTo('opacity', 0, 1); return this.fromTo('opacity', 0.01, 1);
} }
fadeOut() { fadeOut() {
@ -449,6 +449,11 @@ class Animate {
// not using the direct API methods because they're still in flux // not using the direct API methods because they're still in flux
// however, element.animate() seems locked in and uses the latest // however, element.animate() seems locked in and uses the latest
// and correct API methods under the hood, so really doesn't matter // and correct API methods under the hood, so really doesn't matter
if (!fromEffect) {
return console.error(ele.tagName, 'animation fromEffect required, toEffect:', toEffect);
}
this.toEffect = parseEffect(toEffect); this.toEffect = parseEffect(toEffect);
this.shouldAnimate = (duration > RENDER_DELAY); this.shouldAnimate = (duration > RENDER_DELAY);

42
ionic/transitions/md-transition.ts
View File

@ -6,8 +6,8 @@ const DURATION = 300;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
const TRANSLATEY = 'translateY'; const TRANSLATEY = 'translateY';
const OFF_BOTTOM = '5%'; const OFF_BOTTOM = '40px';
const CENTER = '0%' const CENTER = '0px'
class MaterialTransition extends Transition { class MaterialTransition extends Transition {
@ -24,17 +24,17 @@ class MaterialTransition extends Transition {
.to(TRANSLATEY, CENTER) .to(TRANSLATEY, CENTER)
.before.setStyles({ zIndex: this.entering.index }); .before.setStyles({ zIndex: this.entering.index });
// entering title fades in // entering item moves in bottom to center
this.enteringTitle this.enteringNavbar
.fadeIn(); .to(TRANSLATEY, CENTER)
.before.setStyles({ zIndex: this.entering.index + 10 });
// leaving view stays put // leaving view stays put
this.leavingView this.leavingView
.before.setStyles({ zIndex: this.leaving.index }); .before.setStyles({ zIndex: this.leaving.index });
// leaving title fades out this.leavingNavbar
this.leavingTitle .before.setStyles({ zIndex: this.leaving.index + 10 });
.fadeOut();
// set properties depending on direction // set properties depending on direction
if (opts.direction === 'back') { if (opts.direction === 'back') {
@ -42,23 +42,17 @@ class MaterialTransition extends Transition {
this.enteringView this.enteringView
.from(TRANSLATEY, CENTER); .from(TRANSLATEY, CENTER);
this.leavingNavbar this.enteringNavbar
.before.addClass('transparent-navbar') .from(TRANSLATEY, CENTER);
.after.removeClass('transparent-navbar');
this.leavingTitle
.fadeOut();
// leaving view goes center to bottom // leaving view goes center to bottom
this.leavingView this.leavingView
.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM) .fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
.fadeOut(); .fadeOut();
if (this.leaving.enableBack()) { this.leavingNavbar
let leavingBackButtonText = new Animation(this.leaving.backButtonTextElement()); .fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
leavingBackButtonText.fadeOut(); .fadeOut();
this.leavingNavbar.add(leavingBackButtonText);
}
} else { } else {
// forward direction // forward direction
@ -67,14 +61,8 @@ class MaterialTransition extends Transition {
.fadeIn(); .fadeIn();
this.enteringNavbar this.enteringNavbar
.before.addClass('transparent-navbar') .from(TRANSLATEY, OFF_BOTTOM)
.after.removeClass('transparent-navbar'); .fadeIn();
if (this.entering.enableBack()) {
let enteringBackButtonText = new Animation(this.entering.backButtonTextElement());
enteringBackButtonText.fadeIn();
this.enteringNavbar.add(enteringBackButtonText);
}
} }
} }