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

fix(transition): always use animation, just no duration

Browse Source 
Closes #227
This commit is contained in:
Adam Bradley
2015-10-01 20:45:42 -05:00
parent 86a8175d3a
commit faa9596489
6 changed files with 53 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ionic/animations/animation.ts
View File

@@ -107,7 +107,7 @@ export class Animation {
this._duration = value;
return this;
}
return this._duration || (this._parent && this._parent.duration());
return this._duration || (this._parent && this._parent.duration()) || 0;
}
easing(name, opts) {
@@ -243,7 +243,7 @@ export class Animation {
});
}
if (self._duration > 32) {
if (self._duration > 64) {
// begin each animation when everything is rendered in their starting point
// give the browser some time to render everything in place before starting
setTimeout(kickoff, this._opts.renderDelay);
@@ -299,8 +299,7 @@ export class Animation {
this._to,
this.duration(),
this.easing(),
this.playbackRate(),
this._opts.renderDelay );
this.playbackRate() );
if (animation.shouldAnimate) {
this._ani.push(animation);
@@ -531,7 +530,7 @@ export class Animation {
class Animate {
constructor(ele, fromEffect, toEffect, duration, easingConfig, playbackRate, renderDelay) {
constructor(ele, fromEffect, toEffect, duration, easingConfig, playbackRate) {
// https://w3c.github.io/web-animations/
// not using the direct API methods because they're still in flux
// however, element.animate() seems locked in and uses the latest
@@ -543,7 +542,7 @@ class Animate {
this.toEffect = parseEffect(toEffect);
this.shouldAnimate = (duration > renderDelay);
this.shouldAnimate = (duration > 64);
if (!this.shouldAnimate) {
return inlineStyle(ele, this.toEffect);

11
ionic/components/nav/nav-controller.ts
View File

@@ -69,7 +69,7 @@ export class NavController extends Ion {
// do not animate if this is the first in the stack
if (!this.views.length) {
opts.animation = 'none';
opts.animate = false;
}
// default the direction to "forward"
@@ -269,15 +269,10 @@ export class NavController extends Ion {
return callback();
}
if (opts.animate === false) {
opts.animation = 'none';
} else if (!opts.animation) {
if (!opts.animation) {
opts.animation = this.config.setting('viewTransition');
}
opts.animate = (opts.animation !== 'none');
// wait for the new view to complete setup
enteringView.stage(() => {
@@ -295,7 +290,7 @@ export class NavController extends Ion {
// init the transition animation
let transAnimation = Transition.create(this, opts);
if (!opts.animate) {
if (opts.animate === false) {
// force it to not animate the elements, just apply the "to" styles
transAnimation.duration(0);
}

9
ionic/components/nav/view-controller.ts
View File

@@ -210,15 +210,6 @@ export class ViewController {
}
}
/**
* TODO
* @returns {TODO} TODO
*/
postRender() {
// the elements are in the DOM and the browser
// has rendered them in their correct locations
}
/**
* The view has loaded. This event only happens once per view being

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

@@ -23,7 +23,7 @@ class IOSTransition extends Transition {
this.easing(EASING);
// entering item moves to center
this.enteringView
this.enteringContent
.to(TRANSLATEX, CENTER)
.to(OPACITY, 1)
.before.setStyles({ zIndex: this.entering.index });
@@ -36,22 +36,22 @@ class IOSTransition extends Transition {
.to(TRANSLATEX, CENTER);
// leaving view moves off screen
this.leavingView
this.leavingContent && this.leavingContent
.from(TRANSLATEX, CENTER)
.from(OPACITY, 1)
.before.setStyles({ zIndex: this.leaving.index });
this.leavingTitle
this.leavingTitle && this.leavingTitle
.from(TRANSLATEX, CENTER)
.from(OPACITY, 1);
this.leavingNavbarBg
this.leavingNavbarBg && this.leavingNavbarBg
.from(TRANSLATEX, CENTER);
// set properties depending on direction
if (opts.direction === 'back') {
// back direction
this.enteringView
this.enteringContent
.from(TRANSLATEX, OFF_LEFT)
.from(OPACITY, OFF_OPACITY)
.to(OPACITY, 1);
@@ -62,18 +62,18 @@ class IOSTransition extends Transition {
this.enteringNavbarBg
.from(TRANSLATEX, OFF_LEFT);
this.leavingView
this.leavingContent && this.leavingContent
.to(TRANSLATEX, '100%')
.to(OPACITY, 1);
this.leavingTitle
this.leavingTitle && this.leavingTitle
.to(TRANSLATEX, '100%')
.to(OPACITY, 0);
this.leavingNavbarBg
this.leavingNavbarBg && this.leavingNavbarBg
.to(TRANSLATEX, '100%');
if (this.leaving.enableBack() && this.viewWidth() > 200) {
if (this.leaving && this.leaving.enableBack() && this.viewWidth() > 200) {
let leavingBackButtonText = new Animation(this.leaving.backBtnTextRef());
leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px');
this.leavingNavbar.add(leavingBackButtonText);
@@ -81,7 +81,7 @@ class IOSTransition extends Transition {
} else {
// forward direction
this.enteringView
this.enteringContent
.from(TRANSLATEX, '99.5%')
.from(OPACITY, 1);
@@ -91,15 +91,15 @@ class IOSTransition extends Transition {
this.enteringNavbarBg
.from(TRANSLATEX, '99.5%');
this.leavingView
this.leavingContent && this.leavingContent
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, OFF_OPACITY);
this.leavingTitle
this.leavingTitle && this.leavingTitle
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, 0);
this.leavingNavbarBg
this.leavingNavbarBg && this.leavingNavbarBg
.to(TRANSLATEX, OFF_LEFT);
if (this.entering.enableBack() && this.viewWidth() > 200) {

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

@@ -13,7 +13,7 @@ class MaterialTransition extends Transition {
super(nav, opts);
// entering item moves in bottom to center
this.enteringView
this.enteringContent
.to(TRANSLATEY, CENTER)
.before.setStyles({ zIndex: this.entering.index });
@@ -23,10 +23,10 @@ class MaterialTransition extends Transition {
.before.setStyles({ zIndex: this.entering.index + 10 });
// leaving view stays put
this.leavingView
this.leavingContent && this.leavingContent
.before.setStyles({ zIndex: this.leaving.index });
this.leavingNavbar
this.leavingNavbar && this.leavingNavbar
.before.setStyles({ zIndex: this.leaving.index + 10 });
// set properties depending on direction
@@ -34,18 +34,18 @@ class MaterialTransition extends Transition {
this.duration(200).easing('cubic-bezier(0.47,0,0.745,0.715)');
// back direction
this.enteringView
this.enteringContent
.from(TRANSLATEY, CENTER);
this.enteringNavbar
.from(TRANSLATEY, CENTER);
// leaving view goes center to bottom
this.leavingView
this.leavingContent && this.leavingContent
.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
.fadeOut();
this.leavingNavbar
this.leavingNavbar && this.leavingNavbar
.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
.fadeOut();
@@ -53,7 +53,7 @@ class MaterialTransition extends Transition {
// forward direction
this.duration(280).easing('cubic-bezier(0.36,0.66,0.04,1)');
this.enteringView
this.enteringContent
.from(TRANSLATEY, OFF_BOTTOM)
.fadeIn();
@@ -62,16 +62,16 @@ class MaterialTransition extends Transition {
.fadeIn();
}
let itemLength = nav.length();
if (nav.tabs && (itemLength === 1 || itemLength === 2)) {
let viewLength = nav.length();
if (nav.tabs && (viewLength === 1 || viewLength === 2)) {
let tabBarEle = nav.tabs.elementRef.nativeElement.querySelector('.tab-bar-container');
let tabBar = new Animation(tabBarEle);
if (itemLength === 1 && opts.direction == 'back') {
if (viewLength === 1 && opts.direction == 'back') {
tabBar.fromTo('height', '0px', '69px');
tabBar.fadeIn();
} else if (itemLength === 2 && opts.direction == 'forward') {
} else if (viewLength === 2 && opts.direction == 'forward') {
tabBar.fromTo('height', '69px', '0px');
tabBar.fadeOut();
}

46
ionic/transitions/transition.ts
View File

@@ -14,69 +14,65 @@ export class Transition extends Animation {
super(null, opts);
// get the entering and leaving items
let enteringView = this.entering = nav.getStagedEnteringView();
let leavingView = this.leaving = nav.getStagedLeavingView();
let entering = this.entering = nav.getStagedEnteringView();
let leaving = this.leaving = nav.getStagedLeavingView();
// create animation for the entering item's "ion-view" element
this.enteringView = new Animation(enteringView.viewElementRef());
this.enteringView.before.addClass(SHOW_VIEW_CSS);
this.enteringView.onPlay(() => {
enteringView.postRender();
});
this.add(this.enteringView);
// create animation for the entering view's content area
this.enteringContent = new Animation(entering.viewElementRef());
this.enteringContent.before.addClass(SHOW_VIEW_CSS);
this.add(this.enteringContent);
if (opts.navbar !== false) {
let enteringNavbar = this.enteringNavbar = new Animation(enteringView.navbarRef());
let enteringNavbar = this.enteringNavbar = new Animation(entering.navbarRef());
enteringNavbar.before.addClass(SHOW_NAVBAR_CSS);
if (enteringView.enableBack()) {
if (entering.enableBack()) {
// only animate in the back button if the entering view has it enabled
let enteringBackButton = this.enteringBackButton = new Animation(enteringView.backBtnRef());
let enteringBackButton = this.enteringBackButton = new Animation(entering.backBtnRef());
enteringBackButton
.before.addClass(SHOW_BACK_BUTTON)
.fadeIn();
enteringNavbar.add(enteringBackButton);
}
this.enteringTitle = new Animation(enteringView.titleRef());
this.enteringTitle = new Animation(entering.titleRef());
enteringNavbar.add(this.enteringTitle);
this.add(enteringNavbar);
this.enteringNavbarItems = new Animation(enteringView.navbarItemRefs());
this.enteringNavbarItems = new Animation(entering.navbarItemRefs());
enteringNavbar.add(this.enteringNavbarItems.fadeIn());
this.enteringNavbarBg = new Animation(enteringView.navbarBgRef());
this.enteringNavbarBg = new Animation(entering.navbarBgRef());
enteringNavbar.add(this.enteringNavbarBg);
}
if (leavingView) {
if (leaving) {
// setup the leaving item if one exists (initial viewing wouldn't have a leaving item)
this.leavingView = new Animation(leavingView.viewElementRef());
this.leavingView.after.removeClass(SHOW_VIEW_CSS);
this.leavingContent = new Animation(leaving.viewElementRef());
this.leavingContent.after.removeClass(SHOW_VIEW_CSS);
let leavingNavbar = this.leavingNavbar = new Animation(leavingView.navbarRef());
let leavingNavbar = this.leavingNavbar = new Animation(leaving.navbarRef());
leavingNavbar.after.removeClass(SHOW_NAVBAR_CSS);
let leavingBackButton = this.leavingBackButton = new Animation(leavingView.backBtnRef());
let leavingBackButton = this.leavingBackButton = new Animation(leaving.backBtnRef());
leavingBackButton
.after.removeClass(SHOW_BACK_BUTTON)
.fadeOut();
leavingNavbar.add(leavingBackButton);
this.leavingTitle = new Animation(leavingView.titleRef());
this.leavingTitle = new Animation(leaving.titleRef());
leavingNavbar.add(this.leavingTitle);
this.leavingNavbarItems = new Animation(leavingView.navbarItemRefs());
this.leavingNavbarItems = new Animation(leaving.navbarItemRefs());
leavingNavbar.add(this.leavingNavbarItems.fadeOut());
this.leavingNavbarBg = new Animation(leavingView.navbarBgRef());
this.leavingNavbarBg = new Animation(leaving.navbarBgRef());
leavingNavbar.add(this.leavingNavbarBg);
this.add(this.leavingView, leavingNavbar);
this.add(this.leavingContent, leavingNavbar);
}
}