diff --git a/ionic/animations/animation.ts b/ionic/animations/animation.ts index aa4bd80926..d6f199f2bd 100644 --- a/ionic/animations/animation.ts +++ b/ionic/animations/animation.ts @@ -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); diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index 3cbdc10a44..84dfedb95f 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -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); } diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index 9808725fd7..f89d6170fd 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -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 diff --git a/ionic/transitions/ios-transition.ts b/ionic/transitions/ios-transition.ts index 92225631d4..6009cac757 100644 --- a/ionic/transitions/ios-transition.ts +++ b/ionic/transitions/ios-transition.ts @@ -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) { diff --git a/ionic/transitions/md-transition.ts b/ionic/transitions/md-transition.ts index 821c4b0a6d..d7c4521422 100644 --- a/ionic/transitions/md-transition.ts +++ b/ionic/transitions/md-transition.ts @@ -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(); } diff --git a/ionic/transitions/transition.ts b/ionic/transitions/transition.ts index d4695ebe87..61067f6a26 100644 --- a/ionic/transitions/transition.ts +++ b/ionic/transitions/transition.ts @@ -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); } }