feat(nav): animation is customizable

fixes #15851

angular/src/directives/proxies.ts

@@ -492,7 +492,7 @@ export class MenuToggle {
 }
 
 export declare interface Nav extends StencilComponents<'IonNav'> {}
-@Component({ selector: 'ion-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['swipeGesture', 'animated', 'delegate', 'rootParams', 'root'] })
+@Component({ selector: 'ion-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['swipeGesture', 'animated', 'animation', 'delegate', 'rootParams', 'root'] })
 export class Nav {
   ionNavWillLoad: EventEmitter<CustomEvent>;
   ionNavWillChange: EventEmitter<CustomEvent>;
@@ -501,7 +501,7 @@ export class Nav {
   constructor(r: ElementRef) {
     const el = r.nativeElement;
     proxyMethods(this, el, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'setRouteId', 'getRouteId', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']);
-    proxyInputs(this, el, ['swipeGesture', 'animated', 'delegate', 'rootParams', 'root']);
+    proxyInputs(this, el, ['swipeGesture', 'animated', 'animation', 'delegate', 'rootParams', 'root']);
     proxyOutputs(this, el, ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']);
   }
 }

core/src/components.d.ts

@@ -2782,6 +2782,7 @@ export namespace Components {
     * If the nav should animate the components or not
     */
     'animated': boolean;
+    'animation'?: AnimationBuilder;
     /**
     * Returns true or false if the current view can go back
     */
@@ -2855,6 +2856,7 @@ export namespace Components {
     * If the nav should animate the components or not
     */
     'animated'?: boolean;
+    'animation'?: AnimationBuilder;
     'delegate'?: FrameworkDelegate;
     /**
     * Event fired when the nav has changed components
@@ -3619,7 +3621,7 @@ export namespace Components {
 
   interface IonRouterOutlet {
     'animated': boolean;
-    'animationBuilder'?: AnimationBuilder;
+    'animation'?: AnimationBuilder;
     'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
     'delegate'?: FrameworkDelegate;
     /**
@@ -3634,7 +3636,7 @@ export namespace Components {
   }
   interface IonRouterOutletAttributes extends StencilHTMLAttributes {
     'animated'?: boolean;
-    'animationBuilder'?: AnimationBuilder;
+    'animation'?: AnimationBuilder;
     'delegate'?: FrameworkDelegate;
     'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
     'onIonNavWillChange'?: (event: CustomEvent<void>) => void;

core/src/components/nav/nav.tsx

@@ -1,7 +1,7 @@
 import { Build, Component, Element, Event, EventEmitter, Method, Prop, QueueApi, Watch } from '@stencil/core';
 
 import { ViewLifecycle } from '../..';
-import { Animation, ComponentProps, Config, FrameworkDelegate, Gesture, GestureDetail, Mode, NavComponent, NavOptions, NavOutlet, NavResult, RouteID, RouteWrite, TransitionDoneFn, TransitionInstruction, ViewController } from '../../interface';
+import { Animation, AnimationBuilder, ComponentProps, Config, FrameworkDelegate, Gesture, GestureDetail, Mode, NavComponent, NavOptions, NavOutlet, NavResult, RouteID, RouteWrite, TransitionDoneFn, TransitionInstruction, ViewController } from '../../interface';
 import { assert } from '../../utils/helpers';
 import { TransitionOptions, lifecycle, setPageHidden, transition } from '../../utils/transition';
 
@@ -27,11 +27,8 @@ export class Nav implements NavOutlet {
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'queue' }) queue!: QueueApi;
-
   @Prop({ context: 'config' }) config!: Config;
-
   @Prop({ context: 'window' }) win!: Window;
-
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
 
   /**
@@ -49,6 +46,7 @@ export class Nav implements NavOutlet {
    * If the nav should animate the components or not
    */
   @Prop() animated = true;
+  @Prop() animation?: AnimationBuilder;
 
   /** @hidden */
   @Prop() delegate?: FrameworkDelegate;
@@ -795,6 +793,7 @@ export class Nav implements NavOutlet {
       queue: this.queue,
       window: this.win,
       baseEl: this.el,
+      animationBuilder: this.animation || opts.animationBuilder || this.config.get('navAnimation'),
       progressCallback,
       animated,
 

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

@@ -25,7 +25,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
   @Prop({ context: 'queue' }) queue!: QueueApi;
 
   @Prop() animated = true;
-  @Prop() animationBuilder?: AnimationBuilder;
+  @Prop() animation?: AnimationBuilder;
   @Prop() delegate?: FrameworkDelegate;
 
   @Event() ionNavWillLoad!: EventEmitter<void>;
@@ -124,11 +124,14 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
 
     const { mode, queue, animationCtrl, win, el } = this;
     const animated = this.animated && this.config.getBoolean('animated', true);
+    const animationBuilder = this.animation || opts.animationBuilder || this.config.get('navAnimation');
+
     await transition({
       mode,
       queue,
       animated,
       animationCtrl,
+      animationBuilder,
       window: win,
       enteringEl,
       leavingEl,

core/src/utils/config.ts

@@ -1,4 +1,4 @@
-import { Mode } from '../interface';
+import { AnimationBuilder, Mode } from '../interface';
 
 export interface IonicConfig {
   /**
@@ -33,21 +33,23 @@ export interface IonicConfig {
   tabbarLayout?: string;
   tabbarHighlight?: boolean;
 
-  actionSheetEnter?: string;
-  alertEnter?: string;
-  loadingEnter?: string;
-  modalEnter?: string;
-  popoverEnter?: string;
-  toastEnter?: string;
-  pickerEnter?: string;
+  navAnimation?: AnimationBuilder;
 
-  actionSheetLeave?: string;
-  alertLeave?: string;
-  loadingLeave?: string;
-  modalLeave?: string;
-  popoverLeave?: string;
-  toastLeave?: string;
-  pickerLeave?: string;
+  actionSheetEnter?: AnimationBuilder;
+  alertEnter?: AnimationBuilder;
+  loadingEnter?: AnimationBuilder;
+  modalEnter?: AnimationBuilder;
+  popoverEnter?: AnimationBuilder;
+  toastEnter?: AnimationBuilder;
+  pickerEnter?: AnimationBuilder;
+
+  actionSheetLeave?: AnimationBuilder;
+  alertLeave?: AnimationBuilder;
+  loadingLeave?: AnimationBuilder;
+  modalLeave?: AnimationBuilder;
+  popoverLeave?: AnimationBuilder;
+  toastLeave?: AnimationBuilder;
+  pickerLeave?: AnimationBuilder;
 
   _forceStatusbarPadding?: boolean;
 }