refactor(animations): make animation builder async to allow to ensure stuff is hydrated when animating

packages/core/src/components/action-sheet/animations/ios.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Action Sheet Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -16,10 +16,12 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
 
   wrapperAnimation.fromTo('translateY', '100%', '0%');
 
-  return baseAnimation
+  const ani = baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
     .add(backdropAnimation)
     .add(wrapperAnimation);
+
+  return Promise.resolve(ani);
 }

packages/core/src/components/action-sheet/animations/ios.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Action Sheet Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -16,10 +16,12 @@ export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLEle
 
   wrapperAnimation.fromTo('translateY', '0%', '100%');
 
-  return baseAnimation
+  const ani = baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(450)
     .add(backdropAnimation)
     .add(wrapperAnimation);
+
+  return Promise.resolve(ani);
 }

packages/core/src/components/action-sheet/animations/md.enter.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../index';
 /**
  * MD Action Sheet Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -16,10 +16,12 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
   backdropAnimation.fromTo('opacity', 0.01, 0.26);
   wrapperAnimation.fromTo('translateY', '100%', '0%');
 
-  return baseAnimation
+  const ani = baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
     .add(backdropAnimation)
     .add(wrapperAnimation);
+
+  return Promise.resolve(ani);
 }

packages/core/src/components/action-sheet/animations/md.leave.ts

@@ -3,10 +3,7 @@ import { Animation } from '../../../index';
 /**
  * MD Action Sheet Leave Animation
  */
-export default function mdLeaveAnimation(
-  Animation: Animation,
-  baseElm: HTMLElement
-): Animation {
+export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -18,10 +15,12 @@ export default function mdLeaveAnimation(
   backdropAnimation.fromTo('opacity', 0.26, 0);
   wrapperAnimation.fromTo('translateY', '0%', '100%');
 
-  return baseAnimation
+  const ani = baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(450)
     .add(backdropAnimation)
     .add(wrapperAnimation);
+
+  return Promise.resolve(ani);
 }

packages/core/src/components/alert/animations/ios.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Alert Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -16,10 +16,12 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
 
   wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
 
-  return baseAnimation
+  const ani = baseAnimation
     .addElement(baseElm)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)
     .add(wrapperAnimation);
+
+  return Promise.resolve(ani);
 }

packages/core/src/components/alert/animations/ios.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Alert Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -16,10 +16,12 @@ export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLEle
 
   wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
 
-  return baseAnimation
+  const ani = baseAnimation
     .addElement(baseElm)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)
     .add(wrapperAnimation);
+
+  return Promise.resolve(ani);
 }

packages/core/src/components/alert/animations/md.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../index';
 /**
  * Md Alert Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -16,10 +16,10 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
 
   wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/alert/animations/md.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../index';
 /**
  * Md Alert Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -16,10 +16,10 @@ export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElem
 
   wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/animation-controller/animation-controller.tsx

@@ -10,13 +10,9 @@ export class AnimationControllerImpl implements AnimationController {
 
   @Method()
   create(animationBuilder?: AnimationBuilder, baseElm?: any, opts?: any): Promise<Animation> {
-    return new Promise(resolve => {
-      if (animationBuilder) {
-        resolve(animationBuilder(Animator as any, baseElm, opts));
-      } else {
-        resolve(new Animator() as any);
-      }
-    });
+    if (animationBuilder) {
+      return animationBuilder(Animator as any, baseElm, opts);
+    }
+    return Promise.resolve(new Animator() as any);
   }
-
 }

packages/core/src/components/animation-controller/animation-interface.tsx

@@ -42,7 +42,7 @@ export interface Animation {
 
 
 export interface AnimationBuilder {
-(Animation: Animation, baseElm?: HTMLElement, opts?: any): Animation;
+(Animation: Animation, baseElm?: HTMLElement, opts?: any): Promise<Animation>;
 }
 
 

packages/core/src/components/loading/animations/ios.enter.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Loading Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -18,10 +18,10 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
   wrapperAnimation.fromTo('opacity', 0.01, 1)
                   .fromTo('scale', 1.1, 1);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/loading/animations/ios.leave.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Loading Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -19,10 +19,10 @@ export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLEle
                   .fromTo('scale', 1, 0.9);
 
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/loading/animations/md.enter.ts

@@ -3,10 +3,7 @@ import { Animation } from '../../../index';
 /**
  * Md Loading Enter Animation
  */
-export default function mdEnterAnimation(
-  Animation: Animation,
-  baseElm: HTMLElement
-): Animation {
+export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -19,10 +16,10 @@ export default function mdEnterAnimation(
 
   wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/loading/animations/md.leave.ts

@@ -3,10 +3,7 @@ import { Animation } from '../../../index';
 /**
  * Md Loading Leave Animation
  */
-export default function mdLeaveAnimation(
-  Animation: Animation,
-  baseElm: HTMLElement
-): Animation {
+export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -19,10 +16,10 @@ export default function mdLeaveAnimation(
 
   wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('ease-in-out')
     .duration(200)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/menu-controller/animations/base.ts

@@ -6,15 +6,16 @@ import { Animation } from '../../../index';
  * type will provide their own animations for open and close
  * and registers itself with Menu.
  */
-export default function baseAnimation(Animation: Animation): Animation {
+export default function baseAnimation(Animation: Animation): Promise<Animation> {
   // https://material.io/guidelines/motion/movement.html#movement-movement-in-out-of-screen-bounds
   // https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
 
   // "Apply the sharp curve to items temporarily leaving the screen that may return
   // from the same exit point. When they return, use the deceleration curve. On mobile,
   // this transition typically occurs over 300ms" -- MD Motion Guide
-  return new Animation()
+  return Promise.resolve(
+    new Animation()
     .easing('cubic-bezier(0.0, 0.0, 0.2, 1)') // Deceleration curve (Entering the screen)
     .easingReverse('cubic-bezier(0.4, 0.0, 0.6, 1)') // Sharp curve (Temporarily leaving the screen)
-    .duration(300);
+    .duration(300));
 }

packages/core/src/components/menu-controller/animations/overlay.ts

@@ -8,7 +8,7 @@ const BOX_SHADOW_WIDTH = 8;
  * The menu slides over the content. The content
  * itself, which is under the menu, does not move.
  */
-export default function(Animation: Animation, _: HTMLElement, menu: Menu): Animation {
+export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
   let closedX: string, openedX: string;
   const width = menu.width + BOX_SHADOW_WIDTH;
   if (menu.isRightSide) {
@@ -30,7 +30,10 @@ export default function(Animation: Animation, _: HTMLElement, menu: Menu): Anima
     .addElement(menu.backdropEl)
     .fromTo('opacity', 0.01, 0.3);
 
-  return baseAnimation(Animation)
-    .add(menuAni)
-    .add(backdropAni);
+
+
+  return baseAnimation(Animation).then(animation => {
+    return animation.add(menuAni)
+      .add(backdropAni);
+  });
 }

packages/core/src/components/menu-controller/animations/push.ts

@@ -7,7 +7,7 @@ import baseAnimation from './base';
  * The content slides over to reveal the menu underneath.
  * The menu itself also slides over to reveal its bad self.
  */
-export default function(Animation: Animation, _: HTMLElement, menu: Menu): Animation {
+export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
 
   let contentOpenedX: string, menuClosedX: string;
   const width = menu.width;
@@ -32,8 +32,9 @@ export default function(Animation: Animation, _: HTMLElement, menu: Menu): Anima
     .addElement(menu.backdropEl)
     .fromTo('opacity', 0.01, 0.2);
 
-  return baseAnimation(Animation)
-    .add(menuAni)
+  return baseAnimation(Animation).then((animation) => {
+    return animation.add(menuAni)
     .add(backdropAni)
     .add(contentAni);
+  });
 }

packages/core/src/components/menu-controller/animations/reveal.ts

@@ -7,13 +7,14 @@ import baseAnimation from './base';
  * The content slides over to reveal the menu underneath.
  * The menu itself, which is under the content, does not move.
  */
-export default function(Animation: Animation, _: HTMLElement, menu: Menu): Animation {
+export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
   const openedX = (menu.width * (menu.isRightSide ? -1 : 1)) + 'px';
 
   const contentOpen = new Animation()
     .addElement(menu.contentEl)
     .fromTo('translateX', '0px', openedX);
 
-  return baseAnimation(Animation)
-    .add(contentOpen);
+  return baseAnimation(Animation).then(animation => {
+    return animation.add(contentOpen);
+  });
 }

packages/core/src/components/modal/animations/ios.enter.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Modal Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -18,13 +18,13 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
 
   backdropAnimation.fromTo('opacity', 0.01, 0.4);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(0.36,0.66,0.04,1)')
     .duration(400)
     .beforeAddClass('show-modal')
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }
 
 /**

packages/core/src/components/modal/animations/ios.leave.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Modal Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -20,10 +20,10 @@ export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLEle
 
   backdropAnimation.fromTo('opacity', 0.4, 0.0);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('ease-out')
     .duration(250)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/modal/animations/md.enter.ts

@@ -3,10 +3,7 @@ import { Animation } from '../../../index';
 /**
  * Md Modal Enter Animation
  */
-export default function mdEnterAnimation(
-  Animation: Animation,
-  baseElm: HTMLElement
-): Animation {
+export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -21,11 +18,11 @@ export default function mdEnterAnimation(
 
   backdropAnimation.fromTo('opacity', 0.01, 0.4);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(0.36,0.66,0.04,1)')
     .duration(280)
     .beforeAddClass('show-modal')
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/modal/animations/md.leave.ts

@@ -3,10 +3,7 @@ import { Animation } from '../../../index';
 /**
  * Md Modal Leave Animation
  */
-export default function mdLeaveAnimation(
-  Animation: Animation,
-  baseElm: HTMLElement
-): Animation {
+export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -22,10 +19,10 @@ export default function mdLeaveAnimation(
 
   backdropAnimation.fromTo('opacity', 0.4, 0.0);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(0.47,0,0.745,0.715)')
     .duration(200)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/nav/nav-interfaces.ts

@@ -105,7 +105,7 @@ export interface Transition extends Animation {
 }
 
 export interface TransitionBuilder {
-  (rootTransition: Transition, enteringView: ViewController, leavingView: ViewController, opts: AnimationOptions ): Transition;
+  (rootTransition: Transition, enteringView: ViewController, leavingView: ViewController, opts: AnimationOptions ): Promise<Transition>;
 }
 
 export interface PublicViewController {

packages/core/src/components/nav/nav-utils.ts

@@ -132,22 +132,22 @@ export function destroyTransition(transitionId: number) {
   }
 }
 
-export function getHydratedTransition(name: string, config: Config, transitionId: number, emptyTransition: Transition, enteringView: ViewController, leavingView: ViewController, opts: AnimationOptions, defaultTransitionFactory: TransitionBuilder) {
+export function getHydratedTransition(name: string, config: Config, transitionId: number, emptyTransition: Transition, enteringView: ViewController, leavingView: ViewController, opts: AnimationOptions, defaultTransitionFactory: TransitionBuilder): Promise<Transition> {
 
   const transitionFactory = config.get(name) as TransitionBuilder || defaultTransitionFactory;
-  const hydratedTransition = transitionFactory(emptyTransition, enteringView, leavingView, opts);
-  hydratedTransition.transitionId = transitionId;
 
-  if (!activeTransitions.has(transitionId)) {
-    // sweet, this is the root transition
-    activeTransitions.set(transitionId, hydratedTransition);
-  } else {
-    // we've got a parent transition going
-    // just append this transition to the existing one
-    activeTransitions.get(transitionId).add(hydratedTransition);
-  }
-
-  return hydratedTransition;
+  return transitionFactory(emptyTransition, enteringView, leavingView, opts).then((hydratedTransition) => {
+    hydratedTransition.transitionId = transitionId;
+    if (!activeTransitions.has(transitionId)) {
+      // sweet, this is the root transition
+      activeTransitions.set(transitionId, hydratedTransition);
+    } else {
+      // we've got a parent transition going
+      // just append this transition to the existing one
+      activeTransitions.get(transitionId).add(hydratedTransition);
+    }
+    return hydratedTransition;
+  });
 }
 
 export function canGoBack(nav: Nav) {

packages/core/src/components/nav/nav.tsx

@@ -588,7 +588,6 @@ export function loadViewAndTransition(nav: Nav, enteringView: ViewController, le
     });
   }
 
-  let transition: Transition = null;
   const transitionId = getParentTransitionId(nav);
   nav.transitionId = transitionId >= 0 ? transitionId : getNextTransitionId();
 
@@ -605,21 +604,22 @@ export function loadViewAndTransition(nav: Nav, enteringView: ViewController, le
 
 
   const emptyTransition = transitionFactory(ti.animation);
-  transition = getHydratedTransition(animationOpts.animation, nav.config, nav.transitionId, emptyTransition, enteringView, leavingView, animationOpts, getDefaultTransition(nav.config));
+  return getHydratedTransition(animationOpts.animation, nav.config, nav.transitionId, emptyTransition, enteringView, leavingView, animationOpts, getDefaultTransition(nav.config)).then((transition) => {
 
-  if (nav.swipeToGoBackTransition) {
-    nav.swipeToGoBackTransition.destroy();
-    nav.swipeToGoBackTransition = null;
-  }
+    if (nav.swipeToGoBackTransition) {
+      nav.swipeToGoBackTransition.destroy();
+      nav.swipeToGoBackTransition = null;
+    }
 
-  // it's a swipe to go back transition
-  if (transition.isRoot() && ti.opts.progressAnimation) {
-    nav.swipeToGoBackTransition = transition;
-  }
+    // it's a swipe to go back transition
+    if (transition.isRoot() && ti.opts.progressAnimation) {
+      nav.swipeToGoBackTransition = transition;
+    }
 
-  transition.start();
+    transition.start();
 
-  return executeAsyncTransition(nav, transition, enteringView, leavingView, ti.delegate, ti.opts, ti.nav.config.getBoolean('animate'));
+    return executeAsyncTransition(nav, transition, enteringView, leavingView, ti.delegate, ti.opts, ti.nav.config.getBoolean('animate'));
+  });
 }
 
 // TODO - transition type

packages/core/src/components/nav/transitions/transition.ios.ts

@@ -11,7 +11,7 @@ const CENTER = '0%';
 const OFF_OPACITY = 0.8;
 const SHOW_BACK_BTN_CSS = 'show-back-button';
 
-export function buildIOSTransition(rootTransition: Transition, enteringView: ViewController, leavingView: ViewController, opts: AnimationOptions): Transition {
+export function buildIOSTransition(rootTransition: Transition, enteringView: ViewController, leavingView: ViewController, opts: AnimationOptions): Promise<Transition> {
 
   rootTransition.enteringView = enteringView;
   rootTransition.leavingView = leavingView;
@@ -141,7 +141,8 @@ export function buildIOSTransition(rootTransition: Transition, enteringView: Vie
         .add(leavingToolBarItems)
         .add(leavingBackButton)
         .add(leavingToolBarBg);
-      this.add(leavingToolBar);
+
+      rootTransition.add(leavingToolBar);
 
       // fade out leaving toolbar items
       leavingBackButton.fromTo(OPACITY, 0.99, 0);
@@ -175,5 +176,5 @@ export function buildIOSTransition(rootTransition: Transition, enteringView: Vie
       }
     }
   }
-  return rootTransition;
+  return Promise.resolve(rootTransition);
 }

packages/core/src/components/nav/transitions/transition.md.ts

@@ -7,7 +7,7 @@ const OFF_BOTTOM = '40px';
 const CENTER = '0px';
 const SHOW_BACK_BTN_CSS = 'show-back-button';
 
-export function buildMdTransition(rootTransition: Transition, enteringView: ViewController, leavingView: ViewController, opts: AnimationOptions): Transition {
+export function buildMdTransition(rootTransition: Transition, enteringView: ViewController, leavingView: ViewController, opts: AnimationOptions): Promise<Transition> {
 
   rootTransition.enteringView = enteringView;
   rootTransition.leavingView = leavingView;
@@ -54,5 +54,5 @@ export function buildMdTransition(rootTransition: Transition, enteringView: View
     rootTransition.add(leavingPage.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM).fromTo('opacity', 1, 0));
   }
 
-  return rootTransition;
+  return Promise.resolve(rootTransition);
 }

packages/core/src/components/picker/animations/ios.enter.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Picker Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -17,10 +17,10 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
 
   wrapperAnimation.fromTo('translateY', '100%', '0%');
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/picker/animations/ios.leave.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Picker Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -17,10 +17,10 @@ export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLEle
 
   wrapperAnimation.fromTo('translateY', '0%', '100%');
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/popover/animations/ios.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Popover Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement, ev?: Event): Animation {
+export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement, ev?: Event): Promise<Animation> {
   let originY = 'top';
   let originX = 'left';
 
@@ -123,11 +123,11 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
   wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
   wrapperAnimation.fromTo('opacity', 0.01, 1);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('ease')
     .duration(100)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }
 const POPOVER_IOS_BODY_PADDING = 5;

packages/core/src/components/popover/animations/ios.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Popover Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -15,10 +15,10 @@ export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLEle
   wrapperAnimation.fromTo('opacity', 0.99, 0);
   backdropAnimation.fromTo('opacity', 0.08, 0);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('ease')
     .duration(500)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/popover/animations/md.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../index';
 /**
  * Md Popover Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement, ev?: Event): Animation {
+export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement, ev?: Event): Promise<Animation> {
   let originY = 'top';
   let originX = 'left';
 
@@ -85,13 +85,13 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
   viewportAnimation.addElement(baseElm.querySelector('.popover-viewport'));
   viewportAnimation.fromTo('opacity', 0.01, 1);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(0.36,0.66,0.04,1)')
     .duration(300)
     .add(backdropAnimation)
     .add(wrapperAnimation)
     .add(contentAnimation)
-    .add(viewportAnimation);
+    .add(viewportAnimation));
 }
 const POPOVER_MD_BODY_PADDING = 12;

packages/core/src/components/popover/animations/md.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../index';
 /**
  * Md Popover Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
@@ -15,10 +15,10 @@ export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElem
   wrapperAnimation.fromTo('opacity', 0.99, 0);
   backdropAnimation.fromTo('opacity', 0.08, 0);
 
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('ease')
     .duration(500)
     .add(backdropAnimation)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/toast/animations/ios.enter.ts

@@ -3,11 +3,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Toast Enter Animation
  */
-export default function iosEnterAnimation(
-  Animation: Animation,
-  baseElm: HTMLElement,
-  position: string
-): Animation {
+export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();
@@ -29,9 +25,9 @@ export default function iosEnterAnimation(
       wrapperAnimation.fromTo('translateY', '100%', '-10px');
       break;
   }
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(.155,1.105,.295,1.12)')
     .duration(400)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/toast/animations/ios.leave.ts

@@ -3,11 +3,7 @@ import { Animation } from '../../../index';
 /**
  * iOS Toast Leave Animation
  */
-export default function iosLeaveAnimation(
-  Animation: Animation,
-  baseElm: HTMLElement,
-  position: string
-): Animation {
+export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();
@@ -24,9 +20,9 @@ export default function iosLeaveAnimation(
       wrapperAnimation.fromTo('translateY', `${0 - 10}px`, '100%');
       break;
   }
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(300)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/toast/animations/md.enter.ts

@@ -3,11 +3,7 @@ import { Animation } from '../../../index';
 /**
  * MD Toast Enter Animation
  */
-export default function mdEnterAnimation(
-  Animation: Animation,
-  baseElm: HTMLElement,
-  position: string
-): Animation {
+export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();
@@ -29,9 +25,9 @@ export default function mdEnterAnimation(
       wrapperAnimation.fromTo('translateY', '100%', '0%');
       break;
   }
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }

packages/core/src/components/toast/animations/md.leave.ts

@@ -3,11 +3,7 @@ import { Animation } from '../../../index';
 /**
  * md Toast Leave Animation
  */
-export default function mdLeaveAnimation(
-  Animation: Animation,
-  baseElm: HTMLElement,
-  position: string
-): Animation {
+export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();
@@ -25,9 +21,9 @@ export default function mdLeaveAnimation(
       wrapperAnimation.fromTo('translateY', `0px`, '100%');
       break;
   }
-  return baseAnimation
+  return Promise.resolve(baseAnimation
     .addElement(baseElm)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(300)
-    .add(wrapperAnimation);
+    .add(wrapperAnimation));
 }