From 4fdfddb6b85b4e5531b9d0060e5629accbf45ee2 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Tue, 27 Mar 2018 12:36:37 +0200 Subject: [PATCH] fix(nav): no animation --- core/src/components/nav/nav.tsx | 13 ++- .../components/router-outlet/route-outlet.tsx | 8 +- core/src/utils/transition.ts | 84 +++++++++---------- 3 files changed, 57 insertions(+), 48 deletions(-) diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index a6a82c5474..3059ecbd45 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -607,11 +607,8 @@ export class NavControllerBase implements NavOutlet { // we should animate (duration > 0) if the pushed page is not the first one (startup) // or if it is a portal (modal, actionsheet, etc.) - const shouldAnimate = this.animated && this._init && this._views.length > 1; - const animationBuilder = (shouldAnimate) - ? this.mode === 'ios' ? iosTransitionAnimation : mdTransitionAnimation - : undefined; + const animationBuilder = this.getAnimationBuilder(ti.opts); const progressAnimation = ti.opts.progressAnimation ? (animation: Animation) => this._sbTrns = animation @@ -662,6 +659,14 @@ export class NavControllerBase implements NavOutlet { }; } + private getAnimationBuilder(opts: NavOptions) { + if (opts.duration === 0 || !this._init || this.animated === false || this._views.length <= 1) { + return undefined; + } + const mode = opts.animation || this.config.get('pageTransition', this.mode); + return mode === 'ios' ? iosTransitionAnimation : mdTransitionAnimation; + } + private _insertViewAt(view: ViewController, index: number) { const existingIndex = this._views.indexOf(view); if (existingIndex > -1) { diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx index dfcc142edf..2e4a8c618c 100644 --- a/core/src/components/router-outlet/route-outlet.tsx +++ b/core/src/components/router-outlet/route-outlet.tsx @@ -24,10 +24,16 @@ export class RouterOutlet implements NavOutlet { @Prop({context: 'config'}) config: Config; @Prop({connect: 'ion-animation-controller'}) animationCtrl: HTMLIonAnimationControllerElement; - @Prop() animated = true; + @Prop() animated: boolean; @Prop() animationBuilder: AnimationBuilder; @Prop() delegate: FrameworkDelegate; + componentWillLoad() { + if (this.animated === undefined) { + this.animated = this.config.getBoolean('animate', true); + } + } + componentDidUnload() { this.activeEl = this.activeComponent = undefined; } diff --git a/core/src/utils/transition.ts b/core/src/utils/transition.ts index a15489e892..c4070dbd96 100644 --- a/core/src/utils/transition.ts +++ b/core/src/utils/transition.ts @@ -3,37 +3,47 @@ import { NavDirection } from '../components/nav/nav-util'; export let MyCustomEvent = CustomEvent; -export async function transition(opts: AnimationOptions): Promise { +export async function transition(opts: AnimationOptions): Promise { + beforeTransition(opts); + + return (opts.enteringEl && (opts.animationBuilder || opts.animation)) + ? animation(opts) + : noAnimation(opts); // fast path for no animation +} + +function beforeTransition(opts: AnimationOptions) { const enteringEl = opts.enteringEl; const leavingEl = opts.leavingEl; setZIndex(enteringEl, leavingEl, opts.direction); - showPages(enteringEl, leavingEl); - showGoBack(enteringEl, !!opts.showGoBack); - // fast path for no animation - if (!opts.animationBuilder && !opts.animation) { - return noAnimation(opts); + if (enteringEl) { + if (opts.showGoBack) { + enteringEl.classList.add('can-go-back'); + } else { + enteringEl.classList.remove('can-go-back'); + } + enteringEl.hidden = false; } + if (leavingEl) { + leavingEl.hidden = false; + } +} - // transition path +async function animation(opts: AnimationOptions): Promise { await waitDeepReady(opts); + const transition = await createTransition(opts); - fireWillEvents(enteringEl, leavingEl); + fireWillEvents(opts.enteringEl, opts.leavingEl); await playTransition(transition, opts); + if (transition.hasCompleted) { - fireDidEvents(enteringEl, leavingEl); + fireDidEvents(opts.enteringEl, opts.leavingEl); } return transition; } -async function notifyViewReady(viewIsReady: undefined | ((enteringEl: HTMLElement) => Promise), enteringEl: HTMLElement) { - if (viewIsReady) { - await viewIsReady(enteringEl); - } -} - -async function noAnimation(opts: AnimationOptions) { +async function noAnimation(opts: AnimationOptions): Promise { const enteringEl = opts.enteringEl; const leavingEl = opts.leavingEl; @@ -44,6 +54,7 @@ async function noAnimation(opts: AnimationOptions) { fireWillEvents(enteringEl, leavingEl); fireDidEvents(enteringEl, leavingEl); + return undefined; } async function waitDeepReady(opts: AnimationOptions) { @@ -62,22 +73,9 @@ async function waitShallowReady(opts: AnimationOptions) { await notifyViewReady(opts.viewIsReady, opts.enteringEl); } -function showPages(enteringEl: HTMLElement, leavingEl: HTMLElement) { - if (enteringEl) { - enteringEl.hidden = false; - } - if (leavingEl) { - leavingEl.hidden = false; - } -} - -function showGoBack(enteringEl: HTMLElement, goBack: boolean) { - if (enteringEl) { - if (goBack) { - enteringEl.classList.add('can-go-back'); - } else { - enteringEl.classList.remove('can-go-back'); - } +async function notifyViewReady(viewIsReady: undefined | ((enteringEl: HTMLElement) => Promise), enteringEl: HTMLElement) { + if (viewIsReady) { + await viewIsReady(enteringEl); } } @@ -119,17 +117,6 @@ function fireDidEvents(enteringEl: HTMLElement, leavingEl: HTMLElement) { lifecycle(leavingEl, ViewLifecycle.DidLeave); } -function setZIndex(enteringEl: HTMLElement, leavingEl: HTMLElement, direction: NavDirection) { - if (enteringEl) { - enteringEl.style.zIndex = (direction === NavDirection.Back) - ? '99' - : '101'; - } - if (leavingEl) { - leavingEl.style.zIndex = '100'; - } -} - export function lifecycle(el: HTMLElement, lifecycle: ViewLifecycle) { if (el) { const event = new MyCustomEvent(lifecycle, { @@ -162,6 +149,17 @@ function deepReady(el: Element): Promise { } } +function setZIndex(enteringEl: HTMLElement, leavingEl: HTMLElement, direction: NavDirection) { + if (enteringEl) { + enteringEl.style.zIndex = (direction === NavDirection.Back) + ? '99' + : '101'; + } + if (leavingEl) { + leavingEl.style.zIndex = '100'; + } +} + export const enum ViewLifecycle { WillEnter = 'ionViewWillEnter', DidEnter = 'ionViewDidEnter',