feat(animations): set smother animations for modal in ionic

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

@@ -23,6 +23,7 @@ import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 
 import type { ActionSheetButton } from './action-sheet-interface';
+import { ionicEnterAnimation } from './animations/ionic.enter';
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
@@ -228,7 +229,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
     await this.delegateController.attachViewToDom();
 
-    await present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
+    await present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation);
 
     unlock();
   }

core/src/components/action-sheet/animations/ionic.enter.ts

@@ -0,0 +1,30 @@
+import { createAnimation } from '@utils/animation/animation';
+
+import type { Animation } from '../../../interface';
+
+/**
+ * MD Action Sheet Enter Animation
+ */
+export const ionicEnterAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none',
+    })
+    .afterClearStyles(['pointer-events']);
+
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
+    .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
+
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('cubic-bezier(.36,.66,.04,1)')
+    .duration(400)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};

core/src/components/action-sheet/animations/ionic.leave.ts

@@ -0,0 +1,24 @@
+import { createAnimation } from '@utils/animation/animation';
+
+import type { Animation } from '../../../interface';
+
+/**
+ * MD Action Sheet Leave Animation
+ */
+export const ionicLeaveAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop')!).fromTo('opacity', 'var(--backdrop-opacity)', 0);
+
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
+    .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
+
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('cubic-bezier(.36,.66,.04,1)')
+    .duration(450)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};

core/src/components/alert/alert.tsx

@@ -28,6 +28,7 @@ import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
 import type { AlertButton, AlertInput } from './alert-interface';
+import { ionicEnterAnimation } from './animations/ionic.enter';
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
@@ -415,7 +416,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
     await this.delegateController.attachViewToDom();
 
-    await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => {
+    await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation).then(() => {
       /**
        * Check if alert has only one button and no inputs.
        * If so, then focus on the button. Otherwise, focus the alert wrapper.

core/src/components/alert/animations/ionic.enter.ts

@@ -0,0 +1,31 @@
+import { createAnimation } from '@utils/animation/animation';
+
+import type { Animation } from '../../../interface';
+
+/**
+ * Ionic Alert Enter Animation
+ */
+export const ionicEnterAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none',
+    })
+    .afterClearStyles(['pointer-events']);
+
+  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper')!).keyframes([
+    { offset: 0, opacity: '0.01', transform: 'scale(0.9)' },
+    { offset: 1, opacity: '1', transform: 'scale(1)' },
+  ]);
+
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('ease-in-out')
+    .duration(150)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};

core/src/components/alert/animations/ionic.leave.ts

@@ -0,0 +1,22 @@
+import { createAnimation } from '@utils/animation/animation';
+
+import type { Animation } from '../../../interface';
+
+/**
+ * Md Alert Leave Animation
+ */
+export const ionicLeaveAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop')!).fromTo('opacity', 'var(--backdrop-opacity)', 0);
+
+  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper')!).fromTo('opacity', 0.99, 0);
+
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('ease-in-out')
+    .duration(150)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};

core/src/components/loading/animations/ionic.enter.ts

@@ -0,0 +1,31 @@
+import { createAnimation } from '@utils/animation/animation';
+
+import type { Animation } from '../../../interface';
+
+/**
+ * Ionic Loading Enter Animation
+ */
+export const ionicEnterAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none',
+    })
+    .afterClearStyles(['pointer-events']);
+
+  wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')!).keyframes([
+    { offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
+    { offset: 1, opacity: 1, transform: 'scale(1)' },
+  ]);
+
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('ease-in-out')
+    .duration(200)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};

core/src/components/loading/animations/ionic.leave.ts

@@ -0,0 +1,25 @@
+import { createAnimation } from '@utils/animation/animation';
+
+import type { Animation } from '../../../interface';
+
+/**
+ * Md Loading Leave Animation
+ */
+export const ionicLeaveAnimation = (baseEl: HTMLElement): Animation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+
+  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop')!).fromTo('opacity', 'var(--backdrop-opacity)', 0);
+
+  wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')!).keyframes([
+    { offset: 0, opacity: 0.99, transform: 'scale(1)' },
+    { offset: 1, opacity: 0, transform: 'scale(0.9)' },
+  ]);
+
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('ease-in-out')
+    .duration(200)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};

core/src/components/loading/loading.tsx

@@ -23,6 +23,7 @@ import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
 
+import { ionicEnterAnimation } from './animations/ionic.enter';
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
@@ -255,7 +256,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
 
     await this.delegateController.attachViewToDom();
 
-    await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
+    await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation);
 
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);

core/src/components/modal/animations/ionic.enter.ts

@@ -0,0 +1,53 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
+import type { Animation } from '../../../interface';
+import type { ModalAnimationOptions } from '../modal-interface';
+
+import { createSheetEnterAnimation } from './sheet';
+
+const createEnterAnimation = () => {
+  const backdropAnimation = createAnimation()
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none',
+    })
+    .afterClearStyles(['pointer-events']);
+
+  const wrapperAnimation = createAnimation().keyframes([
+    { offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
+    { offset: 1, opacity: 1, transform: `translateY(0px)` },
+  ]);
+
+  return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
+};
+
+/**
+ * Ionic Modal Enter Animation
+ */
+export const ionicEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
+  const { currentBreakpoint, expandToScroll } = opts;
+  const root = getElementRoot(baseEl);
+  const { wrapperAnimation, backdropAnimation, contentAnimation } =
+    currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
+
+  backdropAnimation.addElement(root.querySelector('ion-backdrop')!);
+
+  wrapperAnimation.addElement(root.querySelector('.modal-wrapper')!);
+
+  // The content animation is only added if scrolling is enabled for
+  // all the breakpoints.
+  !expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
+
+  backdropAnimation.duration(300).easing('ease-out');
+  wrapperAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
+  contentAnimation?.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
+
+  const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
+
+  if (contentAnimation) {
+    baseAnimation.addAnimation(contentAnimation);
+  }
+
+  return baseAnimation;
+};

core/src/components/modal/animations/ionic.leave.ts

@@ -0,0 +1,38 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
+import type { Animation } from '../../../interface';
+import type { ModalAnimationOptions } from '../modal-interface';
+
+import { createSheetLeaveAnimation } from './sheet';
+
+const createLeaveAnimation = () => {
+  const backdropAnimation = createAnimation().fromTo('opacity', 'var(--backdrop-opacity)', 0);
+
+  const wrapperAnimation = createAnimation().keyframes([
+    { offset: 0, opacity: 0.99, transform: `translateY(0px)` },
+    { offset: 1, opacity: 0, transform: 'translateY(40px)' },
+  ]);
+
+  return { backdropAnimation, wrapperAnimation };
+};
+
+/**
+ * Md Modal Leave Animation
+ */
+export const ionicLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
+  const { currentBreakpoint } = opts;
+  const root = getElementRoot(baseEl);
+  const { wrapperAnimation, backdropAnimation } =
+    currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
+
+  backdropAnimation.addElement(root.querySelector('ion-backdrop')!);
+  wrapperAnimation.addElement(root.querySelector('.modal-wrapper')!);
+
+  backdropAnimation.duration(250).easing('ease-in');
+  wrapperAnimation.duration(400).easing('cubic-bezier(0.4, 0, 1, 1)');
+
+  const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
+
+  return baseAnimation;
+};