refactor(toast): md animation uses transform (#28392)

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

@@ -19,7 +19,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts: ToastPresentOptions)
 
   switch (position) {
     case 'top':
-      wrapperEl.style.top = top;
+      wrapperEl.style.setProperty('transform', `translateY(${top})`);
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     case 'middle':
@@ -28,7 +28,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts: ToastPresentOptions)
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     default:
-      wrapperEl.style.bottom = bottom;
+      wrapperEl.style.setProperty('transform', `translateY(${bottom})`);
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
   }

core/src/components/toast/animations/utils.ts

@@ -8,10 +8,12 @@ import type { ToastAnimationPosition, ToastPosition } from '../toast-interface';
  * Calculate the CSS top and bottom position of the toast, to be used
  * as starting points for the animation keyframes.
  *
- * Note that MD animates bottom-positioned toasts using style.bottom,
+ * The default animations for both MD and iOS
- * which calculates from the bottom edge of the screen, while iOS uses
+ * use translateY, which calculates from the
- * translateY, which calculates from the top edge of the screen. This
+ * top edge of the screen. This behavior impacts
- * is why the bottom calculates differ slightly between modes.
+ * how we compute the offset when a toast has
+ * position='bottom' since we need to calculate from
+ * the bottom edge of the screen instead.
  *
  * @param position The value of the toast's position prop.
  * @param positionAnchor The element the toast should be anchored to,
@@ -31,7 +33,7 @@ export function getAnimationPosition(
    */
   let offset: number;
   if (mode === 'md') {
-    offset = 8;
+    offset = position === 'top' ? 8 : -8;
   } else {
     offset = position === 'top' ? 10 : -10;
   }
@@ -54,11 +56,7 @@ export function getAnimationPosition(
        * to the top edge of the anchor. We want to calculate from the
        * bottom edge of the screen instead.
        */
-      if (mode === 'md') {
+      offset -= win.innerHeight - box.top;
-        offset += win.innerHeight - box.top;
-      } else {
-        offset -= win.innerHeight - box.top;
-      }
     }
 
     /**
@@ -72,10 +70,7 @@ export function getAnimationPosition(
   } else {
     return {
       top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
-      bottom:
+      bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
-        mode === 'md'
-          ? `calc(${offset}px + var(--ion-safe-area-bottom, 0px))`
-          : `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
     };
   }
 }

core/src/components/toast/toast.ios.scss

@@ -37,22 +37,10 @@
   }
 }
 
-.toast-wrapper.toast-top {
-  @include transform(translate3d(0, -100%, 0));
-
-  top: 0;
-}
-
 .toast-wrapper.toast-middle {
   opacity: .01;
 }
 
-.toast-wrapper.toast-bottom {
-  @include transform(translate3d(0, 100%, 0));
-
-  bottom: 0;
-}
-
 .toast-content {
   @include padding($toast-ios-content-padding-top, $toast-ios-content-padding-end, $toast-ios-content-padding-bottom, $toast-ios-content-padding-start);
 }
@@ -96,4 +84,4 @@
   .toast-button:hover {
     opacity: .6;
   }
-}
+}

core/src/components/toast/toast.scss

@@ -99,6 +99,18 @@
   box-shadow: var(--box-shadow);
 }
 
+.toast-wrapper.toast-top {
+  @include transform(translate3d(0, -100%, 0));
+
+  top: 0;
+}
+
+.toast-wrapper.toast-bottom {
+  @include transform(translate3d(0, 100%, 0));
+
+  bottom: 0;
+}
+
 .toast-container {
   display: flex;