fix(nav): no animation

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) {

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;
   }

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<Animation|void> {
+export async function transition(opts: AnimationOptions): Promise<Animation|null> {
+  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<Animation> {
   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<any>), enteringEl: HTMLElement) {
-  if (viewIsReady) {
-    await viewIsReady(enteringEl);
-  }
-}
-
-async function noAnimation(opts: AnimationOptions) {
+async function noAnimation(opts: AnimationOptions): Promise<null> {
   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<any>), 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<any> {
   }
 }
 
+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',