fix(modal): add animation when scrollAtEdge is false

Author: thetaPC

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

@@ -4,7 +4,7 @@ import type { ModalAnimationOptions } from '../modal-interface';
 import { getBackdropValueForSheet } from '../utils';
 
 export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
-  const { currentBreakpoint, backdropBreakpoint } = opts;
+  const { currentBreakpoint, backdropBreakpoint, scrollAtEdge } = opts;
 
   /**
    * If the backdropBreakpoint is undefined, then the backdrop
@@ -32,10 +32,12 @@ export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
   /**
    * This allows the content to be scrollable at any breakpoint.
    */
-  const contentAnimation = createAnimation('contentAnimation').keyframes([
-    { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint!) * 100}%` },
-    { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint! * 100}%` },
-  ]);
+  const contentAnimation = !scrollAtEdge
+    ? createAnimation('contentAnimation').keyframes([
+        { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint!) * 100}%` },
+        { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint! * 100}%` },
+      ])
+    : undefined;
 
   return { wrapperAnimation, backdropAnimation, contentAnimation };
 };

core/src/components/modal/modal.scss

@@ -167,9 +167,9 @@ ion-backdrop {
   bottom: 0;
 }
 
-// :host(.modal-sheet.modal-scroll-all) ion-footer {
-//   position: absolute;
-//   bottom: 0;
+:host(.modal-sheet.modal-scroll-all) ion-footer {
+  position: absolute;
+  bottom: 0;
 
-//   width: var(--width);
-// }
+  width: var(--width);
+}

core/src/components/modal/modal.tsx

@@ -951,7 +951,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
       focusTrap,
       scrollAtEdge,
     } = this;
-    console.log('isSheetModal', isSheetModal, 'scrollAtEdge', scrollAtEdge, 'both', isSheetModal && !scrollAtEdge);
     const showHandle = handle !== false && isSheetModal;
     const mode = getIonMode(this);
     const isCardModal = presentingElement !== undefined && mode === 'ios';