feat(): diffenernt animations for different modes

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;
-
-    if (!animationBuilder) {
-      // user did not provide a custom animation fn
-      // decide from the config which animation to use
-      animationBuilder = iOSEnterAnimation;
-    }
+    const animationBuilder = this.enterAnimation || this.config.get('loadingEnter', this.mode === 'ios' ? iOSEnterAnimation : MdEnterAnimation);
 
     // 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;
-
-      if (!animationBuilder) {
-        // user did not provide a custom animation fn
-        // decide from the config which animation to use
-        animationBuilder = iOSLeaveAnimation;
-      }
+      const animationBuilder = this.leaveAnimation || this.config.get('loadingLeave', this.mode === 'ios' ? iOSLeaveAnimation : MdLeaveAnimation);
 
       // 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 };