javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +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() {
return this.fromTo('opacity', 0, 1);
return this.fromTo('opacity', 0.01, 1);
}
fadeOut() {
@ -449,6 +449,11 @@ class Animate {
// not using the direct API methods because they're still in flux
// however, element.animate() seems locked in and uses the latest
// 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.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 TRANSLATEY = 'translateY';
const OFF_BOTTOM = '5%';
const CENTER = '0%'
const OFF_BOTTOM = '40px';
const CENTER = '0px'
class MaterialTransition extends Transition {
@ -24,17 +24,17 @@ class MaterialTransition extends Transition {
.to(TRANSLATEY, CENTER)
.before.setStyles({ zIndex: this.entering.index });
// entering title fades in
this.enteringTitle
.fadeIn();
// entering item moves in bottom to center
this.enteringNavbar
.to(TRANSLATEY, CENTER)
.before.setStyles({ zIndex: this.entering.index + 10 });
// leaving view stays put
this.leavingView
.before.setStyles({ zIndex: this.leaving.index });
// leaving title fades out
this.leavingTitle
.fadeOut();
this.leavingNavbar
.before.setStyles({ zIndex: this.leaving.index + 10 });
// set properties depending on direction
if (opts.direction === 'back') {
@ -42,23 +42,17 @@ class MaterialTransition extends Transition {
this.enteringView
.from(TRANSLATEY, CENTER);
this.leavingNavbar
.before.addClass('transparent-navbar')
.after.removeClass('transparent-navbar');
this.leavingTitle
.fadeOut();
this.enteringNavbar
.from(TRANSLATEY, CENTER);
// leaving view goes center to bottom
this.leavingView
.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
.fadeOut();
if (this.leaving.enableBack()) {
let leavingBackButtonText = new Animation(this.leaving.backButtonTextElement());
leavingBackButtonText.fadeOut();
this.leavingNavbar.add(leavingBackButtonText);
}
this.leavingNavbar
.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
.fadeOut();
} else {
// forward direction
@ -67,14 +61,8 @@ class MaterialTransition extends Transition {
.fadeIn();
this.enteringNavbar
.before.addClass('transparent-navbar')
.after.removeClass('transparent-navbar');
if (this.entering.enableBack()) {
let enteringBackButtonText = new Animation(this.entering.backButtonTextElement());
enteringBackButtonText.fadeIn();
this.enteringNavbar.add(enteringBackButtonText);
}
.from(TRANSLATEY, OFF_BOTTOM)
.fadeIn();
}
}