feat(): diffenernt animations for different modes

packages/core/src/components.d.ts

@@ -104,7 +104,7 @@ declare global {
         translucent?: boolean,
         animate?: boolean,
         enterAnimation?: AnimationBuilder,
-        exitAnimation?: AnimationBuilder,
+        leaveAnimation?: AnimationBuilder,
         actionSheetId?: string
     }
   }
@@ -174,10 +174,10 @@ declare global {
         inputs?: AlertInput[],
         enableBackdropDismiss?: boolean,
         translucent?: boolean,
+        alertId?: string,
         animate?: boolean,
         enterAnimation?: AnimationBuilder,
-        exitAnimation?: AnimationBuilder,
+        leaveAnimation?: AnimationBuilder
-        alertId?: string
     }
   }
 }
@@ -1640,10 +1640,10 @@ declare global {
         dismissOnPageChange?: boolean,
         duration?: number,
         translucent?: boolean,
-        enterAnimation?: AnimationBuilder,
-        exitAnimation?: AnimationBuilder,
         loadingId?: string,
-        showBackdrop?: boolean
+        showBackdrop?: boolean,
+        enterAnimation?: AnimationBuilder,
+        leaveAnimation?: AnimationBuilder
     }
   }
 }
@@ -1778,10 +1778,10 @@ declare global {
         componentProps?: any,
         cssClass?: string,
         enableBackdropDismiss?: boolean,
-        enterAnimation?: AnimationBuilder,
-        exitAnimation?: AnimationBuilder,
         modalId?: string,
-        showBackdrop?: boolean
+        showBackdrop?: boolean,
+        enterAnimation?: AnimationBuilder,
+        leaveAnimation?: AnimationBuilder
     }
   }
 }
@@ -2068,7 +2068,7 @@ declare global {
         dismissOnPageChange?: boolean,
         duration?: number,
         enterAnimation?: AnimationBuilder,
-        exitAnimation?: AnimationBuilder,
+        leaveAnimation?: AnimationBuilder,
         pickerId?: string,
         showBackdrop?: boolean,
         enableBackdropDismiss?: boolean,
@@ -2141,7 +2141,7 @@ declare global {
         cssClass?: string,
         enableBackdropDismiss?: boolean,
         enterAnimation?: AnimationBuilder,
-        exitAnimation?: AnimationBuilder,
+        leaveAnimation?: AnimationBuilder,
         ev?: Event,
         popoverId?: string,
         showBackdrop?: boolean,
@@ -3313,9 +3313,9 @@ declare global {
         dismissOnPageChange?: boolean,
         position?: string,
         translucent?: boolean,
+        toastId?: string,
         enterAnimation?: AnimationBuilder,
-        exitAnimation?: AnimationBuilder,
+        leaveAnimation?: AnimationBuilder
-        toastId?: string
     }
   }
 }

packages/core/src/components/action-sheet/action-sheet.tsx

@@ -7,6 +7,9 @@ import { createThemedClasses } from '../../utils/theme';
 import iOSEnterAnimation from './animations/ios.enter';
 import iOSLeaveAnimation from './animations/ios.leave';
 
+import MdEnterAnimation from './animations/md.enter';
+import MdLeaveAnimation from './animations/md.leave';
+
 @Component({
   tag: 'ion-action-sheet',
   styleUrls: {
@@ -67,9 +70,9 @@ export class ActionSheet {
 
   @Prop() animate: boolean = true;
   @Prop() enterAnimation: AnimationBuilder;
-  @Prop() exitAnimation: AnimationBuilder;
+  @Prop() leaveAnimation: AnimationBuilder;
-  @Prop() actionSheetId: string;
 
+  @Prop() actionSheetId: string;
 
   @Method()
   present() {
@@ -80,13 +83,7 @@ export class ActionSheet {
     this.ionActionSheetWillPresent.emit();
 
     // get the user's animation fn if one was provided
-    let animationBuilder = this.enterAnimation;
+    const animationBuilder = this.enterAnimation || this.config.get('actionSheetEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
-
-    if (!animationBuilder) {
-      // user did not provide a custom animation fn
-      // decide from the config which animation to use
-      animationBuilder = iOSEnterAnimation;
-    }
 
     // build the animation and kick it off
     this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@@ -110,14 +107,8 @@ export class ActionSheet {
       this.animation = null;
     }
     this.ionActionSheetWillDismiss.emit();
+    const animationBuilder = this.leaveAnimation || this.config.get('actionSheetLeave', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
 
-    // get the user's animation fn if one was provided
-    let animationBuilder = this.exitAnimation;
-    if (!animationBuilder) {
-      // user did not provide a custom animation fn
-      // decide from the config which animation to use
-      animationBuilder = iOSLeaveAnimation;
-    }
 
     return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
       this.animation = animation;
@@ -295,5 +286,7 @@ export interface ActionSheetDismissEvent extends OverlayDismissEvent {
 
 export {
   iOSEnterAnimation as ActionSheetiOSEnterAnimation,
-  iOSLeaveAnimation as ActionSheetiOSLeaveAnimation
+  iOSLeaveAnimation as ActionSheetiOSLeaveAnimation,
+  MdEnterAnimation as ActionSheetMDEnterAnimation,
+  MdLeaveAnimation as ActionSheetMDLeaveAnimation,
 };

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

@@ -0,0 +1,25 @@
+
+import { Animation } from '../../../index';
+
+/**
+ * MD Action Sheet Enter Animation
+ */
+export default function MdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+  const baseAnimation = new Animation();
+
+  const backdropAnimation = new Animation();
+  backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
+
+  const wrapperAnimation = new Animation();
+  wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
+
+  backdropAnimation.fromTo('opacity', 0.01, 0.26);
+  wrapperAnimation.fromTo('translateY', '100%', '0%');
+
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('cubic-bezier(.36,.66,.04,1)')
+    .duration(400)
+    .add(backdropAnimation)
+    .add(wrapperAnimation);
+}

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

@@ -0,0 +1,27 @@
+import { Animation } from '../../../index';
+
+/**
+ * MD Action Sheet Leave Animation
+ */
+export default function MdLeaveAnimation(
+  Animation: Animation,
+  baseElm: HTMLElement
+): Animation {
+  const baseAnimation = new Animation();
+
+  const backdropAnimation = new Animation();
+  backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
+
+  const wrapperAnimation = new Animation();
+  wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
+
+  backdropAnimation.fromTo('opacity', 0.26, 0);
+  wrapperAnimation.fromTo('translateY', '0%', '100%');
+
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('cubic-bezier(.36,.66,.04,1)')
+    .duration(450)
+    .add(backdropAnimation)
+    .add(wrapperAnimation);
+}

packages/core/src/components/alert/alert.tsx

@@ -9,6 +9,9 @@ import { createThemedClasses } from '../../utils/theme';
 import iOSEnterAnimation from './animations/ios.enter';
 import iOSLeaveAnimation from './animations/ios.leave';
 
+import MdEnterAnimation from './animations/md.enter';
+import MdLeaveAnimation from './animations/md.leave';
+
 @Component({
   tag: 'ion-alert',
   styleUrls: {
@@ -73,10 +76,11 @@ export class Alert {
   @Prop() translucent: boolean = false;
 
   @Prop() animate: boolean = true;
-  @Prop() enterAnimation: AnimationBuilder;
-  @Prop() exitAnimation: AnimationBuilder;
   @Prop() alertId: string;
 
+  @Prop() enterAnimation: AnimationBuilder;
+  @Prop() leaveAnimation: AnimationBuilder;
+
   @Method() present() {
     if (this.animation) {
       this.animation.destroy();
@@ -85,12 +89,7 @@ export class Alert {
     this.ionAlertWillPresent.emit();
 
     // get the user's animation fn if one was provided
-    let animationBuilder = this.enterAnimation;
+    const animationBuilder = this.enterAnimation || this.config.get('alertEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
-    if (!animationBuilder) {
-      // user did not provide a custom animation fn
-      // decide from the config which animation to use
-      animationBuilder = iOSEnterAnimation;
-    }
 
     // build the animation and kick it off
     return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@@ -123,12 +122,7 @@ export class Alert {
     });
 
     // get the user's animation fn if one was provided
-    let animationBuilder = this.exitAnimation;
+    const animationBuilder = this.leaveAnimation || this.config.get('alertLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation);
-    if (!animationBuilder) {
-      // user did not provide a custom animation fn
-      // decide from the config which animation to use
-      animationBuilder = iOSLeaveAnimation;
-    }
 
     return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
       this.animation = animation;
@@ -488,5 +482,7 @@ export interface AlertDismissEvent extends OverlayDismissEvent {
 
 export {
   iOSEnterAnimation as AlertiOSEnterAnimation,
-  iOSLeaveAnimation as AlertiOSLeaveAnimation
+  iOSLeaveAnimation as AlertiOSLeaveAnimation,
+  MdEnterAnimation as AlertMDEnterAnimation,
+  MdLeaveAnimation as AlertMDLeaveAnimation,
 };

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

@@ -0,0 +1,25 @@
+import { Animation } from '../../../index';
+
+/**
+ * Md Alert Enter Animation
+ */
+export default function MdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+  const baseAnimation = new Animation();
+
+  const backdropAnimation = new Animation();
+  backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
+
+  const wrapperAnimation = new Animation();
+  wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
+
+  backdropAnimation.fromTo('opacity', 0.01, 0.5);
+
+  wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
+
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('ease-in-out')
+    .duration(200)
+    .add(backdropAnimation)
+    .add(wrapperAnimation);
+}

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

@@ -0,0 +1,25 @@
+import { Animation } from '../../../index';
+
+/**
+ * Md Alert Leave Animation
+ */
+export default function MdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+  const baseAnimation = new Animation();
+
+  const backdropAnimation = new Animation();
+  backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
+
+  const wrapperAnimation = new Animation();
+  wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
+
+  backdropAnimation.fromTo('opacity', 0.5, 0);
+
+  wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
+
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('ease-in-out')
+    .duration(200)
+    .add(backdropAnimation)
+    .add(wrapperAnimation);
+}

packages/core/src/components/datetime/test/basic/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Datetime - Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <script src="/dist/ionic.js"></script>
 </head>
 <body>

packages/core/src/components/item-options/item-options.tsx

@@ -40,7 +40,7 @@ export class ItemOptions {
         'item-options-left': !this.isRightSide(),
         'item-options-right': this.isRightSide()
       }
-    }
+    };
   }
 
   render() {

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

@@ -0,0 +1,28 @@
+import { Animation } from '../../../index';
+
+/**
+ * Md Loading Enter Animation
+ */
+export default function MdEnterAnimation(
+  Animation: Animation,
+  baseElm: HTMLElement
+): Animation {
+  const baseAnimation = new Animation();
+
+  const backdropAnimation = new Animation();
+  backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
+
+  const wrapperAnimation = new Animation();
+  wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
+
+  backdropAnimation.fromTo('opacity', 0.01, 0.5);
+
+  wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
+
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('ease-in-out')
+    .duration(200)
+    .add(backdropAnimation)
+    .add(wrapperAnimation);
+}

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

@@ -0,0 +1,28 @@
+import { Animation } from '../../../index';
+
+/**
+ * Md Loading Leave Animation
+ */
+export default function MdLeaveAnimation(
+  Animation: Animation,
+  baseElm: HTMLElement
+): Animation {
+  const baseAnimation = new Animation();
+
+  const backdropAnimation = new Animation();
+  backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
+
+  const wrapperAnimation = new Animation();
+  wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
+
+  backdropAnimation.fromTo('opacity', 0.5, 0);
+
+  wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
+
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('ease-in-out')
+    .duration(200)
+    .add(backdropAnimation)
+    .add(wrapperAnimation);
+}

packages/core/src/components/loading/loading.tsx

@@ -6,6 +6,9 @@ import { createThemedClasses } from '../../utils/theme';
 import iOSEnterAnimation from './animations/ios.enter';
 import iOSLeaveAnimation from './animations/ios.leave';
 
+import MdEnterAnimation from './animations/md.enter';
+import MdLeaveAnimation from './animations/md.leave';
+
 @Component({
   tag: 'ion-loading',
   styleUrls: {
@@ -65,11 +68,12 @@ export class Loading {
   @Prop() dismissOnPageChange: boolean = false;
   @Prop() duration: number;
   @Prop() translucent: boolean = false;
-  @Prop() enterAnimation: AnimationBuilder;
-  @Prop() exitAnimation: AnimationBuilder;
   @Prop() loadingId: string;
   @Prop() showBackdrop: boolean = true;
 
+  @Prop() enterAnimation: AnimationBuilder;
+  @Prop() leaveAnimation: AnimationBuilder;
+
   present() {
     return new Promise<void>(resolve => {
       this._present(resolve);
@@ -85,13 +89,7 @@ export class Loading {
     this.ionLoadingWillPresent.emit({ loading: this });
 
     // get the user's animation fn if one was provided
-    let animationBuilder = this.enterAnimation;
+    const animationBuilder = this.enterAnimation || this.config.get('loadingEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
-
-    if (!animationBuilder) {
-      // user did not provide a custom animation fn
-      // decide from the config which animation to use
-      animationBuilder = iOSEnterAnimation;
-    }
 
     // build the animation and kick it off
     this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@@ -118,13 +116,7 @@ export class Loading {
       this.ionLoadingWillDismiss.emit({ loading: this });
 
       // get the user's animation fn if one was provided
-      let animationBuilder = this.exitAnimation;
+      const animationBuilder = this.leaveAnimation || this.config.get('loadingLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation);
-
-      if (!animationBuilder) {
-        // user did not provide a custom animation fn
-        // decide from the config which animation to use
-        animationBuilder = iOSLeaveAnimation;
-      }
 
       // build the animation and kick it off
       this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@@ -254,4 +246,4 @@ export interface LoadingEvent extends Event {
   };
 }
 
-export { iOSEnterAnimation, iOSLeaveAnimation };
+export { iOSEnterAnimation, iOSLeaveAnimation, MdEnterAnimation, MdLeaveAnimation };

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

@@ -0,0 +1,31 @@
+import { Animation } from '../../../index';
+
+/**
+ * Md Modal Enter Animation
+ */
+export default function MdEnterAnimation(
+  Animation: Animation,
+  baseElm: HTMLElement
+): Animation {
+  const baseAnimation = new Animation();
+
+  const backdropAnimation = new Animation();
+  backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
+
+  const wrapperAnimation = new Animation();
+  wrapperAnimation.addElement(baseElm.querySelector('.modal-wrapper'));
+
+  wrapperAnimation
+    .fromTo('opacity', 0.01, 1)
+    .fromTo('translateY', '40px', '0px');
+
+  backdropAnimation.fromTo('opacity', 0.01, 0.4);
+
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('cubic-bezier(0.36,0.66,0.04,1)')
+    .duration(280)
+    .beforeAddClass('show-modal')
+    .add(backdropAnimation)
+    .add(wrapperAnimation);
+}

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

@@ -0,0 +1,31 @@
+import { Animation } from '../../../index';
+
+/**
+ * Md Modal Leave Animation
+ */
+export default function MdLeaveAnimation(
+  Animation: Animation,
+  baseElm: HTMLElement
+): Animation {
+  const baseAnimation = new Animation();
+
+  const backdropAnimation = new Animation();
+  backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
+
+  const wrapperAnimation = new Animation();
+  const wrapperElm = baseElm.querySelector('.modal-wrapper');
+  wrapperAnimation.addElement(wrapperElm);
+
+  wrapperAnimation
+    .fromTo('opacity', 0.99, 0)
+    .fromTo('translateY', '0px', '40px');
+
+  backdropAnimation.fromTo('opacity', 0.4, 0.0);
+
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('cubic-bezier(0.47,0,0.745,0.715)')
+    .duration(200)
+    .add(backdropAnimation)
+    .add(wrapperAnimation);
+}

packages/core/src/components/modal/modal.tsx

@@ -1,10 +1,12 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, AnimationController } from '../../index';
+import { Animation, AnimationBuilder, AnimationController, Config } from '../../index';
 import { createThemedClasses } from '../../utils/theme';
 
 import iOSEnterAnimation from './animations/ios.enter';
 import iOSLeaveAnimation from './animations/ios.leave';
 
+import MdEnterAnimation from './animations/md.enter';
+import MdLeaveAnimation from './animations/md.leave';
 @Component({
   tag: 'ion-modal',
   styleUrls: {
@@ -49,17 +51,20 @@ export class Modal {
   @Event() ionModalDidUnload: EventEmitter;
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
+  @Prop({ context: 'config' }) config: Config;
   @Prop() mode: string;
   @Prop() color: string;
   @Prop() component: string;
   @Prop() componentProps: any = {};
   @Prop() cssClass: string;
   @Prop() enableBackdropDismiss: boolean = true;
-  @Prop() enterAnimation: AnimationBuilder;
+
-  @Prop() exitAnimation: AnimationBuilder;
   @Prop() modalId: string;
   @Prop() showBackdrop: boolean = true;
 
+  @Prop() enterAnimation: AnimationBuilder;
+  @Prop() leaveAnimation: AnimationBuilder;
+
   private animation: Animation;
 
 
@@ -78,14 +83,7 @@ export class Modal {
     this.ionModalWillPresent.emit({ modal: this });
 
     // get the user's animation fn if one was provided
-    let animationBuilder = this.enterAnimation;
+    const animationBuilder = this.enterAnimation || this.config.get('modalEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
-
-    if (!animationBuilder) {
-      // user did not provide a custom animation fn
-      // decide from the config which animation to use
-      // TODO!!
-      animationBuilder = iOSEnterAnimation;
-    }
 
     // build the animation and kick it off
     this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@@ -109,14 +107,7 @@ export class Modal {
       this.ionModalWillDismiss.emit({ modal: this });
 
       // get the user's animation fn if one was provided
-      let animationBuilder = this.exitAnimation;
+      const animationBuilder = this.leaveAnimation || this.config.get('modalExit', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation);
-
-      if (!animationBuilder) {
-        // user did not provide a custom animation fn
-        // decide from the config which animation to use
-        // TODO!!
-        animationBuilder = iOSLeaveAnimation;
-      }
 
       // build the animation and kick it off
       this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@@ -210,4 +201,4 @@ export interface ModalEvent extends Event {
   };
 }
 
-export { iOSEnterAnimation, iOSLeaveAnimation };
+export { iOSEnterAnimation, iOSLeaveAnimation, MdEnterAnimation, MdLeaveAnimation };

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

@@ -19,8 +19,8 @@ export default function iOSEnterAnimation(Animation: Animation, baseElm: HTMLEle
 
   return baseAnimation
     .addElement(baseElm)
-    .easing('ease-in-out')
+    .easing('cubic-bezier(.36,.66,.04,1)')
-    .duration(200)
+    .duration(400)
     .add(backdropAnimation)
     .add(wrapperAnimation);
 }

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

@@ -19,8 +19,8 @@ export default function iOSLeaveAnimation(Animation: Animation, baseElm: HTMLEle
 
   return baseAnimation
     .addElement(baseElm)
-    .easing('ease-in-out')
+    .easing('cubic-bezier(.36,.66,.04,1)')
-    .duration(200)
+    .duration(400)
     .add(backdropAnimation)
     .add(wrapperAnimation);
 }

packages/core/src/components/picker/picker.tsx

@@ -61,7 +61,7 @@ export class Picker {
   @Prop() dismissOnPageChange: boolean = false;
   @Prop() duration: number;
   @Prop() enterAnimation: AnimationBuilder;
-  @Prop() exitAnimation: AnimationBuilder;
+  @Prop() leaveAnimation: AnimationBuilder;
   @Prop() pickerId: string;
   @Prop() showBackdrop: boolean = true;
   @Prop() enableBackdropDismiss: boolean = true;
@@ -84,13 +84,7 @@ export class Picker {
     this.ionPickerWillPresent.emit({ picker: this });
 
     // get the user's animation fn if one was provided
-    let animationBuilder = this.enterAnimation;
+    const animationBuilder = this.enterAnimation || this.config.get('pickerEnter', iOSEnterAnimation);
-
-    if (!animationBuilder) {
-      // user did not provide a custom animation fn
-      // decide from the config which animation to use
-      animationBuilder = iOSEnterAnimation;
-    }
 
     // build the animation and kick it off
     this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@@ -117,13 +111,7 @@ export class Picker {
       this.ionPickerWillDismiss.emit({ picker: this });
 
       // get the user's animation fn if one was provided
-      let animationBuilder = this.exitAnimation;
+      const animationBuilder = this.leaveAnimation || this.config.get('pickerLeave', iOSLeaveAnimation);
-
-      if (!animationBuilder) {
-        // user did not provide a custom animation fn
-        // decide from the config which animation to use
-        animationBuilder = iOSLeaveAnimation;
-      }
 
       // build the animation and kick it off
       this.animationCtrl.create(animationBuilder, this.el).then(animation => {

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

@@ -0,0 +1,20 @@
+import { Animation } from '../../../index';
+
+
+/**
+ * Md Popover Enter Animation
+ */
+export default function MdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+  const baseAnimation = new Animation();
+
+  const backdropAnimation = new Animation();
+  backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
+
+  backdropAnimation.fromTo('opacity', 0.01, 0.08);
+
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('cubic-bezier(0.36,0.66,0.04,1)')
+    .duration(300)
+    .add(backdropAnimation);
+}

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

@@ -0,0 +1,24 @@
+import { Animation } from '../../../index';
+
+/**
+ * Md Popover Leave Animation
+ */
+export default function MdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Animation {
+  const baseAnimation = new Animation();
+
+  const backdropAnimation = new Animation();
+  backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
+
+  const wrapperAnimation = new Animation();
+  wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
+
+  wrapperAnimation.fromTo('opacity', 0.99, 0);
+  backdropAnimation.fromTo('opacity', 0.08, 0);
+
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('ease')
+    .duration(500)
+    .add(backdropAnimation)
+    .add(wrapperAnimation);
+}

packages/core/src/components/popover/popover.tsx

@@ -5,6 +5,8 @@ import { createThemedClasses } from '../../utils/theme';
 
 import iOSEnterAnimation from './animations/ios.enter';
 import iOSLeaveAnimation from './animations/ios.leave';
+import MdEnterAnimation from './animations/md.enter';
+import MdLeaveAnimation from './animations/md.leave';
 
 @Component({
   tag: 'ion-popover',
@@ -63,7 +65,7 @@ export class Popover {
   @Prop() cssClass: string;
   @Prop() enableBackdropDismiss: boolean = true;
   @Prop() enterAnimation: AnimationBuilder;
-  @Prop() exitAnimation: AnimationBuilder;
+  @Prop() leaveAnimation: AnimationBuilder;
   @Prop() ev: Event;
   @Prop() popoverId: string;
   @Prop() showBackdrop: boolean = true;
@@ -205,13 +207,8 @@ export class Popover {
     this.ionPopoverWillPresent.emit({ popover: this });
 
     // get the user's animation fn if one was provided
-    let animationBuilder = this.enterAnimation;
+    const animationBuilder = this.enterAnimation || this.config.get('popoverEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
 
-    if (!animationBuilder) {
-      // user did not provide a custom animation fn
-      // decide from the config which animation to use
-      animationBuilder = iOSEnterAnimation;
-    }
 
     // build the animation and kick it off
     this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@@ -235,12 +232,7 @@ export class Popover {
       this.ionPopoverWillDismiss.emit({ popover: this });
 
       // get the user's animation fn if one was provided
-      let animationBuilder = this.exitAnimation;
+      const animationBuilder = this.leaveAnimation || this.config.get('popoverLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation);
-      if (!animationBuilder) {
-        // user did not provide a custom animation fn
-        // decide from the config which animation to use
-        animationBuilder = iOSLeaveAnimation;
-      }
 
       // build the animation and kick it off
       this.animationCtrl.create(animationBuilder, this.el).then(animation => {
@@ -361,4 +353,4 @@ export const POPOVER_POSITION_PROPERTIES: any = {
   }
 };
 
-export { iOSEnterAnimation, iOSLeaveAnimation };
+export { iOSEnterAnimation, iOSLeaveAnimation, MdEnterAnimation, MdLeaveAnimation };

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

@@ -16,7 +16,7 @@ export default function iOSEnterAnimation(
 
   switch (position) {
     case 'top':
-      wrapperAnimation.fromTo('translateY', '-100%', `${10}px`);
+      wrapperAnimation.fromTo('translateY', '-100%', '10px');
       break;
     case 'middle':
       let topPosition = Math.floor(
@@ -26,7 +26,7 @@ export default function iOSEnterAnimation(
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     default:
-      wrapperAnimation.fromTo('translateY', '100%', `${0 - 10}px`);
+      wrapperAnimation.fromTo('translateY', '100%', '-10px');
       break;
   }
   return baseAnimation

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

@@ -0,0 +1,37 @@
+import { Animation } from '../../../index';
+
+/**
+ * MD Toast Enter Animation
+ */
+export default function MdEnterAnimation(
+  Animation: Animation,
+  baseElm: HTMLElement,
+  position: string
+): Animation {
+  const baseAnimation = new Animation();
+
+  const wrapperAnimation = new Animation();
+  const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
+  wrapperAnimation.addElement(wrapperEle);
+
+  switch (position) {
+    case 'top':
+      wrapperAnimation.fromTo('translateY', '-100%', '0%');
+      break;
+    case 'middle':
+      let topPosition = Math.floor(
+        baseElm.clientHeight / 2 - wrapperEle.clientHeight / 2
+      );
+      wrapperEle.style.top = `${topPosition}px`;
+      wrapperAnimation.fromTo('opacity', 0.01, 1);
+      break;
+    default:
+      wrapperAnimation.fromTo('translateY', '100%', '0%');
+      break;
+  }
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('cubic-bezier(.36,.66,.04,1)')
+    .duration(400)
+    .add(wrapperAnimation);
+}

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

@@ -0,0 +1,33 @@
+import { Animation } from '../../../index';
+
+/**
+ * iOS Toast Leave Animation
+ */
+export default function iOSLeaveAnimation(
+  Animation: Animation,
+  baseElm: HTMLElement,
+  position: string
+): Animation {
+  const baseAnimation = new Animation();
+
+  const wrapperAnimation = new Animation();
+  const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
+  wrapperAnimation.addElement(wrapperEle);
+
+  switch (position) {
+    case 'top':
+      wrapperAnimation.fromTo('translateY', '0px', '-100%');
+      break;
+    case 'middle':
+      wrapperAnimation.fromTo('opacity', 0.99, 0);
+      break;
+    default:
+      wrapperAnimation.fromTo('translateY', `0px`, '100%');
+      break;
+  }
+  return baseAnimation
+    .addElement(baseElm)
+    .easing('cubic-bezier(.36,.66,.04,1)')
+    .duration(300)
+    .add(wrapperAnimation);
+}

packages/core/src/components/toast/toast.tsx

@@ -6,6 +6,9 @@ import { createThemedClasses } from '../../utils/theme';
 import iOSEnterAnimation from './animations/ios.enter';
 import iOSLeaveAnimation from './animations/ios.leave';
 
+import MdEnterAnimation from './animations/md.enter';
+import MdLeaveAnimation from './animations/md.leave';
+
 @Component({
   tag: 'ion-toast',
   styleUrls: {
@@ -65,10 +68,11 @@ export class Toast {
   @Prop() dismissOnPageChange: boolean;
   @Prop() position: string;
   @Prop() translucent: boolean = false;
-  @Prop() enterAnimation: AnimationBuilder;
-  @Prop() exitAnimation: AnimationBuilder;
   @Prop() toastId: string;
 
+  @Prop() enterAnimation: AnimationBuilder;
+  @Prop() leaveAnimation: AnimationBuilder;
+
   present() {
     return new Promise<void>(resolve => {
       this._present(resolve);
@@ -83,13 +87,7 @@ export class Toast {
     this.ionToastWillPresent.emit({ toast: this });
 
     // get the user's animation fn if one was provided
-    let animationBuilder = this.enterAnimation;
+    const animationBuilder = this.enterAnimation || this.config.get('toastEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
-
-    if (!animationBuilder) {
-      // user did not provide a custom animation fn
-      // decide from the config which animation to use
-      animationBuilder = iOSEnterAnimation;
-    }
 
     // build the animation and kick it off
     this.animationCtrl.create(animationBuilder, this.el, this.position).then(animation => {
@@ -112,12 +110,7 @@ export class Toast {
       this.ionToastWillDismiss.emit({ toast: this });
 
       // get the user's animation fn if one was provided
-      let animationBuilder = this.exitAnimation;
+      const animationBuilder = this.leaveAnimation || this.config.get('toastLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation);
-      if (!animationBuilder) {
-        // user did not provide a custom animation fn
-        // decide from the config which animation to use
-        animationBuilder = iOSLeaveAnimation;
-      }
 
       // build the animation and kick it off
       this.animationCtrl.create(animationBuilder, this.el, this.position).then(animation => {
@@ -227,4 +220,4 @@ export interface ToastEvent {
   };
 }
 
-export { iOSEnterAnimation, iOSLeaveAnimation };
+export { iOSEnterAnimation, iOSLeaveAnimation, MdEnterAnimation, MdLeaveAnimation };

packages/core/src/index.d.ts

@@ -58,7 +58,9 @@ export {
   LoadingEvent,
   LoadingOptions,
   iOSEnterAnimation as LoadingIOSEnterAnimation,
-  iOSLeaveAnimation as LoadingIOSLeaveAnimation
+  iOSLeaveAnimation as LoadingIOSLeaveAnimation,
+  MdEnterAnimation as LoadingMDEnterAnimation,
+  MdLeaveAnimation as LoadingMDLeaveAnimation
 } from './components/loading/loading';
 export { LoadingController } from './components/loading-controller/loading-controller';
 export { Menu } from './components/menu/menu';
@@ -73,7 +75,9 @@ export {
   ModalOptions,
   ModalEvent,
   iOSEnterAnimation as ModalIOSEnterAnimation,
-  iOSLeaveAnimation as ModalIOSLeaveAnimation
+  iOSLeaveAnimation as ModalIOSLeaveAnimation,
+  MdEnterAnimation as ModalMDEnterAnimation,
+  MdLeaveAnimation as ModalMDLeaveAnimation
 } from './components/modal/modal';
 export { ModalController } from './components/modal-controller/modal-controller';
 export { Nav } from './components/nav/nav';
@@ -99,7 +103,9 @@ export {
   PopoverEvent,
   PopoverOptions,
   iOSEnterAnimation as PopoverIOSEnterAnimation,
-  iOSLeaveAnimation as PopoverIOSLeaveAnimation
+  iOSLeaveAnimation as PopoverIOSLeaveAnimation,
+  MdEnterAnimation as PopoverMDEnterAnimation,
+  MdLeaveAnimation as PopoverMDLeaveAnimation
 } from './components/popover/popover';
 export { PopoverController } from './components/popover-controller/popover-controller';
 export { RadioGroup } from './components/radio-group/radio-group';
@@ -136,7 +142,9 @@ export {
   ToastEvent,
   ToastOptions,
   iOSEnterAnimation as ToastIOSEnterAnimation,
-  iOSLeaveAnimation as ToastIOSLeaveAnimation
+  iOSLeaveAnimation as ToastIOSLeaveAnimation,
+  MdEnterAnimation as ToastMDEnterAnimation,
+  MdLeaveAnimation as ToastMDLeaveAnimation
 } from './components/toast/toast';
 export { ToastController } from './components/toast-controller/toast-controller';
 export { Toggle } from './components/toggle/toggle';
@@ -148,7 +156,7 @@ export { ViewController } from './navigation/view-controller';
 // export all of the component declarations that are dynamically created
 export * from './components';
 
-export { DomController, RafCallback } from './global/dom-controller'
+export { DomController, RafCallback } from './global/dom-controller';
 
 export interface Config {
   get: (key: string, fallback?: any) => any;
@@ -173,7 +181,7 @@ export interface StencilElement extends HTMLElement {
 }
 
 export interface OverlayDismissEvent extends CustomEvent {
-  detail: OverlayDismissEventDetail
+  detail: OverlayDismissEventDetail;
 }
 
 export interface OverlayDismissEventDetail {