feat(modal): add contentAnimation support and animateContentHeight option

Author: kumibrr

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

@@ -17,27 +17,33 @@ const createEnterAnimation = () => {
 
   const wrapperAnimation = createAnimation().fromTo('transform', 'translateY(100vh)', 'translateY(0vh)');
 
-  return { backdropAnimation, wrapperAnimation };
+  return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
 };
 
 /**
  * iOS Modal Enter Animation for the Card presentation style
  */
 export const iosEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
-  const { presentingEl, currentBreakpoint } = opts;
+  const { presentingEl, currentBreakpoint, animateContentHeight } = opts;
   const root = getElementRoot(baseEl);
-  const { wrapperAnimation, backdropAnimation } =
+  const { wrapperAnimation, backdropAnimation, contentAnimation } =
     currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
 
   backdropAnimation.addElement(root.querySelector('ion-backdrop')!);
 
   wrapperAnimation.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow')!).beforeStyles({ opacity: 1 });
 
+  contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
+
   const baseAnimation = createAnimation('entering-base')
     .addElement(baseEl)
     .easing('cubic-bezier(0.32,0.72,0,1)')
     .duration(500)
-    .addAnimation(wrapperAnimation);
+    .addAnimation([wrapperAnimation]);
+
+  if (contentAnimation && animateContentHeight) {
+    baseAnimation.addAnimation(contentAnimation);
+  }
 
   if (presentingEl) {
     const isMobile = window.innerWidth < 768;

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

@@ -19,25 +19,33 @@ const createEnterAnimation = () => {
     { offset: 1, opacity: 1, transform: `translateY(0px)` },
   ]);
 
-  return { backdropAnimation, wrapperAnimation };
+  return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
 };
 
 /**
  * Md Modal Enter Animation
  */
 export const mdEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
-  const { currentBreakpoint } = opts;
+  const { currentBreakpoint, animateContentHeight } = opts;
   const root = getElementRoot(baseEl);
-  const { wrapperAnimation, backdropAnimation } =
+  const { wrapperAnimation, backdropAnimation, contentAnimation } =
     currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
 
   backdropAnimation.addElement(root.querySelector('ion-backdrop')!);
 
   wrapperAnimation.addElement(root.querySelector('.modal-wrapper')!);
 
-  return createAnimation()
-    .addElement(baseEl)
-    .easing('cubic-bezier(0.36,0.66,0.04,1)')
-    .duration(280)
-    .addAnimation([backdropAnimation, wrapperAnimation]);
+  contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
+
+  const baseAnimation = createAnimation()
+  .addElement(baseEl)
+  .easing('cubic-bezier(0.36,0.66,0.04,1)')
+  .duration(280)
+  .addAnimation([backdropAnimation, wrapperAnimation]);
+
+  if (contentAnimation && animateContentHeight) {
+    baseAnimation.addAnimation(contentAnimation);
+  }
+
+  return baseAnimation;
 };

core/src/components/modal/animations/sheet.ts

@@ -29,7 +29,12 @@ export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
     { offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint! * 100}%)` },
   ]);
 
-  return { wrapperAnimation, backdropAnimation };
+  const contentAnimation = createAnimation('contentAnimation').keyframes([
+    { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint!) * 100}%` },
+    { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint! * 100}%` },
+  ]);
+
+  return { wrapperAnimation, backdropAnimation, contentAnimation };
 };
 
 export const createSheetLeaveAnimation = (opts: ModalAnimationOptions) => {

core/src/components/modal/gestures/sheet.ts

@@ -1,4 +1,3 @@
-import { createAnimation } from '@utils/animation/animation';
 import { isIonContent, findClosestIonContent } from '@utils/content';
 import { createGesture } from '@utils/gesture';
 import { clamp, raf, getElementRoot } from '@utils/helpers';
@@ -89,21 +88,7 @@ export const createSheetGesture = (
   const minBreakpoint = breakpoints[0];
   const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === 'wrapperAnimation');
   const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
-  let contentAnimation: Animation | undefined;
-  if (!scrollAtEdge) {
-    /**
-     * If scrollAtEdge is disabled, the content should be scrollable
-     * at any breakpoint and the maxHeight animated so the content is
-     * fully viewable at any breakpoint.
-     */
-    contentAnimation = animation
-      .addAnimation(
-        createAnimation('contentAnimation')
-          .addElement(contentEl!.parentElement!)
-          .keyframes(SheetDefaults.CONTENT_KEYFRAMES)
-      )
-      .childAnimations.find((ani) => ani.id === 'contentAnimation');
-  }
+  const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
 
   const enableBackdrop = () => {
     baseEl.style.setProperty('pointer-events', 'auto');
@@ -142,6 +127,7 @@ export const createSheetGesture = (
   if (wrapperAnimation && backdropAnimation) {
     wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
     backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
+    contentAnimation?.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
     animation.progressStart(true, 1 - currentBreakpoint);
 
     /**

core/src/components/modal/modal-interface.ts

@@ -31,6 +31,7 @@ export interface ModalAnimationOptions {
   presentingEl?: HTMLElement;
   currentBreakpoint?: number;
   backdropBreakpoint?: number;
+  animateContentHeight?: boolean;
 }
 
 export interface ModalBreakpointChangeEventDetail {

core/src/components/modal/modal.tsx

@@ -573,6 +573,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       presentingEl: presentingElement,
       currentBreakpoint: this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
+      animateContentHeight: !this.scrollAtEdge
     });
 
     /* tslint:disable-next-line */
@@ -679,6 +680,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       presentingEl: this.presentingElement,
       currentBreakpoint: initialBreakpoint,
       backdropBreakpoint,
+      animateContentHeight: !this.scrollAtEdge,
     }));
 
     ani.progressStart(true, 1);
@@ -1031,6 +1033,12 @@ interface ModalOverlayOptions {
    * to fade in when using a sheet modal.
    */
   backdropBreakpoint: number;
+
+  /**
+   * Whether or not the modal should animate
+   * content's max-height.
+   */
+  animateContentHeight?: boolean;
 }
 
 type ModalPresentOptions = ModalOverlayOptions;