refactor(transition): deduplicates animation builder

core/src/components.d.ts

@@ -55,6 +55,7 @@ import {
   PopoverOptions,
   RangeInputChangeEvent,
   RouteID,
+  RouterOutletOptions,
   RouteWrite,
   SelectInputChangeEvent,
   SelectPopoverOption,
@@ -79,9 +80,6 @@ import {
 import {
   ViewController,
 } from './components/nav/view-controller';
-import {
-  RouterOutletOptions,
-} from './components/router-outlet/route-outlet';
 import {
   RouterDirection,
   RouterEventDetail,

core/src/components/nav/nav-interface.ts

@@ -1,4 +1,4 @@
-import { Animation, ComponentRef, FrameworkDelegate } from '../../interface';
+import { Animation, AnimationBuilder, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
 import { ViewController } from './view-controller';
 
 export { Nav } from './nav';
@@ -15,16 +15,20 @@ export interface NavResult {
   direction?: NavDirection;
 }
 
-export interface NavOptions {
+export interface RouterOutletOptions {
   animate?: boolean;
-  animation?: string;
+  animationBuilder?: AnimationBuilder;
-  direction?: NavDirection;
   duration?: number;
   easing?: string;
-  id?: string;
+  showGoBack?: boolean;
+  direction?: NavDirection;
+  deepWait?: boolean;
+  mode?: Mode;
   keyboardClose?: boolean;
+}
+
+export interface NavOptions extends RouterOutletOptions {
   progressAnimation?: boolean;
-  ev?: any;
   updateURL?: boolean;
   delegate?: FrameworkDelegate;
   viewIsReady?: (enteringEl: HTMLElement) => Promise<any>;

core/src/components/nav/nav.tsx

@@ -1,20 +1,15 @@
 import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
 import { Animation, ComponentProps, Config, FrameworkDelegate, GestureDetail, Mode, NavOutlet, QueueController, RouteID, RouteWrite, RouterDirection } from '../../interface';
-import { NavComponent, NavDirection, NavOptions, NavResult, TransitionDoneFn, TransitionInstruction } from '../../interface';
+import { NavComponent, NavOptions, NavResult, TransitionDoneFn, TransitionInstruction } from '../../interface';
 import { assert } from '../../utils/helpers';
-import { AnimationOptions, ViewLifecycle, lifecycle, transition } from '../../utils/transition';
+import { TransitionOptions, ViewLifecycle, lifecycle, transition } from '../../utils/transition';
 import { ViewController, ViewState, convertToViews, matches } from './view-controller';
 
-import iosTransitionAnimation from './animations/ios.transition';
-import mdTransitionAnimation from './animations/md.transition';
-
-
 @Component({
   tag: 'ion-nav',
 })
 export class Nav implements NavOutlet {
 
-  private init = false;
   private transInstr: TransitionInstruction[] = [];
   private sbTrns?: Animation;
   private useRouter = false;
@@ -288,7 +283,6 @@ export class Nav implements NavOutlet {
       this.fireError('nav controller was destroyed', ti);
       return;
     }
-    this.init = true;
 
     if (ti.done) {
       ti.done(
@@ -557,30 +551,24 @@ export class Nav implements NavOutlet {
     // or if it is a portal (modal, actionsheet, etc.)
     const opts = ti.opts!;
 
-    const animationBuilder = this.getAnimationBuilder(opts);
+    const progressCallback = opts.progressAnimation
-
+      ? (animation: Animation) => { this.sbTrns = animation; }
-    const progressAnimation = opts.progressAnimation
-      ? (animation: Animation) => this.sbTrns = animation
       : undefined;
 
     const enteringEl = enteringView.element!;
     const leavingEl = leavingView && leavingView.element!;
-    const animationOpts: AnimationOptions = {
+    const animationOpts: TransitionOptions = {
-      animationCtrl: this.animationCtrl,
+      mode: this.mode,
-      animationBuilder: animationBuilder,
+      animate: this.animated,
-      animation: undefined,
-
-      direction: opts.direction as NavDirection,
-      duration: opts.duration,
-      easing: opts.easing,
-      viewIsReady: opts.viewIsReady,
-
       showGoBack: this.canGoBack(enteringView),
-      progressAnimation,
+      animationCtrl: this.animationCtrl,
+      progressCallback,
       window: this.win,
       baseEl: this.el,
       enteringEl,
-      leavingEl
+      leavingEl,
+
+      ...opts
     };
     const trns = await transition(animationOpts);
     return this.transitionFinish(trns, enteringView, leavingView, opts);
@@ -607,14 +595,6 @@ export class Nav implements NavOutlet {
     };
   }
 
-  private getAnimationBuilder(opts: NavOptions) {
-    if (opts.duration === 0 || opts.animate === false || !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 views = this.views;
     const existingIndex = views.indexOf(view);

core/src/components/router-outlet/route-outlet.tsx

@@ -1,11 +1,8 @@
 import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
-import { AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, NavDirection, NavOutlet, RouteID, RouteWrite } from '../../interface';
+import { AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, NavOutlet, RouteID, RouteWrite, RouterOutletOptions } from '../../interface';
 import { transition } from '../../utils';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 
-import iosTransitionAnimation from '../nav/animations/ios.transition';
-import mdTransitionAnimation from '../nav/animations/md.transition';
-
 
 @Component({
   tag: 'ion-router-outlet'
@@ -76,18 +73,15 @@ export class RouterOutlet implements NavOutlet {
     opts = opts || {};
 
     await transition({
-      animationBuilder: this.getAnimationBuilder(opts),
+      mode: this.mode,
-      direction: opts.direction,
+      animate: this.animated,
-      duration: opts.duration,
-      easing: opts.easing,
-      deepWait: opts.deepWait,
-
       animationCtrl: this.animationCtrl,
-      showGoBack: opts.showGoBack,
       window: this.win,
       enteringEl: enteringEl,
       leavingEl: leavingEl,
       baseEl: this.el,
+
+      ...opts
     });
     this.isTransitioning = false;
 
@@ -117,16 +111,6 @@ export class RouterOutlet implements NavOutlet {
     } : undefined;
   }
 
-  private getAnimationBuilder(opts: RouterOutletOptions) {
-    if (opts.duration === 0 || this.animated === false) {
-      return undefined;
-    }
-    const mode = opts.mode || this.config.get('pageTransition', this.mode);
-    return opts.animationBuilder
-      || this.animationBuilder
-      || mode === 'ios' ? iosTransitionAnimation : mdTransitionAnimation;
-  }
-
   render() {
     return [
       this.mode === 'ios' && <div class="nav-decor"/>,
@@ -134,13 +118,3 @@ export class RouterOutlet implements NavOutlet {
     ];
   }
 }
-
-export interface RouterOutletOptions {
-  animationBuilder?: AnimationBuilder;
-  duration?: number;
-  easing?: string;
-  showGoBack?: boolean;
-  direction?: NavDirection;
-  deepWait?: boolean;
-  mode?: 'md' | 'ios';
-}

core/src/utils/animations/ios.transition.ts

@@ -1,5 +1,5 @@
-import { Animation } from '../../../interface';
+import { Animation } from '../../interface';
-import { AnimationOptions } from '../../../utils/transition';
+import { TransitionOptions } from '../../utils/transition';
 
 const DURATION = 500;
 const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
@@ -9,7 +9,7 @@ const TRANSLATEX = 'translateX';
 const CENTER = '0%';
 const OFF_OPACITY = 0.8;
 
-export default function iosTransitionAnimation(Animation: Animation, navEl: HTMLElement, opts: AnimationOptions): Promise<Animation> {
+export default function iosTransitionAnimation(Animation: Animation, navEl: HTMLElement, opts: TransitionOptions): Promise<Animation> {
 
   const isRTL = document.dir === 'rtl';
   const OFF_RIGHT = isRTL ? '-99.5%' : '99.5%';

core/src/utils/animations/md.transition.ts

@@ -1,11 +1,11 @@
-import { Animation } from '../../../interface';
+import { Animation } from '../../interface';
-import { AnimationOptions } from '../../../utils/transition';
+import { TransitionOptions } from '../../utils/transition';
 
 const TRANSLATEY = 'translateY';
 const OFF_BOTTOM = '40px';
 const CENTER = '0px';
 
-export default function mdTransitionAnimation(Animation: Animation, _: HTMLElement, opts: AnimationOptions): Promise<Animation> {
+export default function mdTransitionAnimation(Animation: Animation, _: HTMLElement, opts: TransitionOptions): Promise<Animation> {
 
   const enteringEl = opts.enteringEl;
   const leavingEl = opts.leavingEl;

core/src/utils/transition.ts

@@ -1,15 +1,29 @@
-import { Animation, AnimationBuilder, NavDirection } from '../interface';
+import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../interface';
 
+import iosTransitionAnimation from './animations/ios.transition';
+import mdTransitionAnimation from './animations/md.transition';
 
-export function transition(opts: AnimationOptions): Promise<Animation|null> {
+export function transition(opts: TransitionOptions): Promise<Animation|null> {
   beforeTransition(opts);
 
-  return (opts.leavingEl && (opts.animationBuilder || opts.animation))
+  const animationBuilder = getAnimationBuilder(opts);
-    ? animation(opts)
+  return (animationBuilder)
+    ? animation(animationBuilder, opts)
     : noAnimation(opts); // fast path for no animation
 }
 
-function beforeTransition(opts: AnimationOptions) {
+function getAnimationBuilder(opts: TransitionOptions): AnimationBuilder | undefined {
+  if (!opts.leavingEl || opts.animate === false || opts.duration === 0) {
+    return undefined;
+  }
+  if (opts.animationBuilder) {
+    return opts.animationBuilder;
+  }
+  return opts.mode === 'ios' ? iosTransitionAnimation : mdTransitionAnimation;
+
+}
+
+function beforeTransition(opts: TransitionOptions) {
   const enteringEl = opts.enteringEl;
   const leavingEl = opts.leavingEl;
 
@@ -26,10 +40,10 @@ function beforeTransition(opts: AnimationOptions) {
   }
 }
 
-async function animation(opts: AnimationOptions): Promise<Animation> {
+async function animation(animationBuilder: AnimationBuilder, opts: TransitionOptions): Promise<Animation> {
   await waitForReady(opts, true);
 
-  const trns = await createTransition(opts);
+  const trns = await opts.animationCtrl.create(animationBuilder, opts.baseEl, opts);
   fireWillEvents(opts.window, opts.enteringEl, opts.leavingEl);
   await playTransition(trns, opts);
 
@@ -39,7 +53,7 @@ async function animation(opts: AnimationOptions): Promise<Animation> {
   return trns;
 }
 
-async function noAnimation(opts: AnimationOptions): Promise<null> {
+async function noAnimation(opts: TransitionOptions): Promise<null> {
   const enteringEl = opts.enteringEl;
   const leavingEl = opts.leavingEl;
   if (enteringEl) {
@@ -55,7 +69,7 @@ async function noAnimation(opts: AnimationOptions): Promise<null> {
   return null;
 }
 
-async function waitForReady(opts: AnimationOptions, defaultDeep: boolean) {
+async function waitForReady(opts: TransitionOptions, defaultDeep: boolean) {
   const deep = opts.deepWait != null ? opts.deepWait : defaultDeep;
   const promises = deep ? [
     deepReady(opts.enteringEl),
@@ -75,23 +89,17 @@ async function notifyViewReady(viewIsReady: undefined | ((enteringEl: HTMLElemen
   }
 }
 
-function createTransition(opts: AnimationOptions) {
-  if (opts.animation) {
-    return opts.animation;
-  }
-  return opts.animationCtrl.create(opts.animationBuilder, opts.baseEl, opts);
-}
 
-function playTransition(transition: Animation, opts: AnimationOptions): Promise<Animation> {
+function playTransition(transition: Animation, opts: TransitionOptions): Promise<Animation> {
-  const progressAnimation = opts.progressAnimation;
+  const progressCallback = opts.progressCallback;
   const promise = new Promise<Animation>(resolve => transition.onFinish(resolve));
 
   // cool, let's do this, start the transition
-  if (progressAnimation) {
+  if (progressCallback) {
     // this is a swipe to go back, just get the transition progress ready
     // kick off the swipe animation start
     transition.progressStart();
-    progressAnimation(transition);
+    progressCallback(transition);
 
   } else {
     // only the top level transition should actually start "play"
@@ -176,19 +184,11 @@ export const enum ViewLifecycle {
   WillUnload = 'ionViewWillUnload',
 }
 
-export interface AnimationOptions {
+export interface TransitionOptions extends NavOptions {
   animationCtrl: HTMLIonAnimationControllerElement;
-  animationBuilder: AnimationBuilder|undefined;
+  progressCallback?: ((ani: Animation) => void);
-  animation?: Animation;
-  direction?: NavDirection;
-  duration?: number;
-  easing?: string;
-  deepWait?: boolean;
-  viewIsReady?: (enteringEl: HTMLElement) => Promise<any>;
-  showGoBack?: boolean;
-  progressAnimation?: Function;
   window: Window;
+  baseEl: HTMLElement;
   enteringEl: HTMLElement;
   leavingEl: HTMLElement|undefined;
-  baseEl: HTMLElement;
 }