diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index 29d4cf1e6d..b96921a659 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -2,7 +2,7 @@ import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch, h import { config } from '../../global/config'; import { getIonMode } from '../../global/ionic-global'; -import { Animation, AnimationBuilder, ComponentProps, FrameworkDelegate, Gesture, NavComponent, NavOptions, NavOutlet, NavResult, RouteID, RouteWrite, RouterDirection, TransitionDoneFn, TransitionInstruction, ViewController } from '../../interface'; +import { Animation, AnimationBuilder, ComponentProps, FrameworkDelegate, Gesture, IonicAnimation, NavComponent, NavOptions, NavOutlet, NavResult, RouteID, RouteWrite, RouterDirection, TransitionDoneFn, TransitionInstruction, ViewController } from '../../interface'; import { assert } from '../../utils/helpers'; import { TransitionOptions, lifecycle, setPageHidden, transition } from '../../utils/transition'; @@ -17,7 +17,7 @@ import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToVie export class Nav implements NavOutlet { private transInstr: TransitionInstruction[] = []; - private sbAni?: Animation; + private sbAni?: Animation | IonicAnimation; private useRouter = false; private isTransitioning = false; private destroyed = false; @@ -823,7 +823,7 @@ export class Nav implements NavOutlet { const opts = ti.opts!; const progressCallback = opts.progressAnimation - ? (ani: Animation | undefined) => this.sbAni = ani + ? (ani: IonicAnimation | Animation | undefined) => this.sbAni = ani : undefined; const mode = getIonMode(this); const enteringEl = enteringView.element!; diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx index ac6c78b345..92ffad535a 100644 --- a/core/src/components/router-outlet/route-outlet.tsx +++ b/core/src/components/router-outlet/route-outlet.tsx @@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Pr import { config } from '../../global/config'; import { getIonMode } from '../../global/ionic-global'; -import { Animation, AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Gesture, NavOutlet, RouteID, RouteWrite, RouterDirection, RouterOutletOptions, SwipeGestureHandler } from '../../interface'; +import { Animation, AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Gesture, IonicAnimation, NavOutlet, RouteID, RouteWrite, RouterDirection, RouterOutletOptions, SwipeGestureHandler } from '../../interface'; import { attachComponent, detachComponent } from '../../utils/framework-delegate'; import { transition } from '../../utils/transition'; @@ -17,7 +17,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet { private activeComponent: any; private waitPromise?: Promise; private gesture?: Gesture; - private ani?: Animation; + private ani?: IonicAnimation | Animation; @Element() el!: HTMLElement; diff --git a/core/src/utils/transition/index.ts b/core/src/utils/transition/index.ts index 1d5943c1b9..c7caedb9b2 100644 --- a/core/src/utils/transition/index.ts +++ b/core/src/utils/transition/index.ts @@ -6,6 +6,8 @@ import { Animation, AnimationBuilder, IonicAnimation, NavDirection, NavOptions } const iosTransitionAnimation = () => import('./ios.transition'); const mdTransitionAnimation = () => import('./md.transition'); +export type IonicAnimationInterface = (navEl: HTMLElement, opts: TransitionOptions) => IonicAnimation; + export const transition = (opts: TransitionOptions): Promise => { return new Promise((resolve, reject) => { writeTask(() => { @@ -60,7 +62,7 @@ const afterTransition = (opts: TransitionOptions) => { } }; -const getAnimationBuilder = async (opts: TransitionOptions): Promise => { +const getAnimationBuilder = async (opts: TransitionOptions): Promise => { if (!opts.leavingEl || !opts.animated || opts.duration === 0) { return undefined; } @@ -73,29 +75,25 @@ const getAnimationBuilder = async (opts: TransitionOptions): Promise => { +const animation = async (animationBuilder: IonicAnimationInterface | AnimationBuilder, opts: TransitionOptions): Promise => { await waitForReady(opts, true); - /** - * TODO: Remove AnimationBuilder - */ - let trans; + let trans: Animation | IonicAnimation; + try { - trans = await import('../animation/old-animation').then(mod => mod.create(animationBuilder as any, opts.baseEl, opts)); + trans = await import('../animation/old-animation').then(mod => mod.create(animationBuilder as AnimationBuilder, opts.baseEl, opts)); } catch (err) { - // @ts-ignore - // TODO: Fix this type error - trans = animationBuilder(opts.baseEl, opts); + trans = (animationBuilder as IonicAnimationInterface)(opts.baseEl, opts); } fireWillEvents(opts.enteringEl, opts.leavingEl); const didComplete = await playTransition(trans, opts); + // TODO: Remove AnimationBuilder (trans as any).hasCompleted = didComplete; if (opts.progressCallback) { @@ -146,21 +144,18 @@ const notifyViewReady = async (viewIsReady: undefined | ((enteringEl: HTMLElemen } }; -const playTransition = async (trans: any, opts: TransitionOptions): Promise => { +const playTransition = (trans: IonicAnimation | Animation, opts: TransitionOptions): Promise => { const progressCallback = opts.progressCallback; - const promise = new Promise(resolve => { - trans.onFinish((didComplete: boolean, _: any) => { - resolve(didComplete); - }); - }); + + // TODO: Remove AnimationBuilder + const promise = new Promise(resolve => trans.onFinish(resolve)); // cool, let's do this, start the transition if (progressCallback) { // this is a swipe to go back, just get the transition progress ready // kick off the swipe animation start trans.progressStart(true); - - progressCallback(trans as any); + progressCallback(trans); } else { // only the top level transition should actually start "play" @@ -239,7 +234,7 @@ const setZIndex = ( }; export interface TransitionOptions extends NavOptions { - progressCallback?: ((ani: Animation | undefined) => void); + progressCallback?: ((ani: IonicAnimation | Animation | undefined) => void); baseEl: any; enteringEl: HTMLElement; leavingEl: HTMLElement | undefined; diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index bc81c30894..4a480cde9a 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -6,7 +6,7 @@ export const shadow = (el: T): ShadowRoot | T => { return el.shadowRoot || el; }; -export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptions): Promise => { +export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptions): IonicAnimation => { try { const DURATION = 540; const EASING = 'cubic-bezier(0.32,0.72,0,1)'; @@ -276,7 +276,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio }); } - return rootAnimation as any; + return rootAnimation; } catch (err) { throw err; }