fix(overlays): tear down animations after dismiss

core/src/components/modal/modal.tsx

@@ -10,7 +10,6 @@ import { Style as StatusBarStyle, StatusBar } from '@utils/native/status-bar';
 import {
  GESTURE,
  BACKDROP,
- activeAnimations,
  dismiss,
  eventMethod,
  prepareOverlay,
@@ -705,8 +704,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
  this.keyboardOpenCallback = undefined;
  }
 
- const enteringAnimation = activeAnimations.get(this) || [];
-
  const dismissed = await dismiss<ModalDismissOptions>(
  this,
  data,
@@ -733,8 +730,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
  if (this.gesture) {
  this.gesture.destroy();
  }
-
- enteringAnimation.forEach((ani) => ani.destroy());
  }
  this.currentBreakpoint = undefined;
  this.animation = undefined;

core/src/components/modal/test/animations/modal.e2e.ts

@@ -0,0 +1,45 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
+ test.describe(title('modal: animations'), () => {
+ test.beforeEach(async ({ page }) => {
+ await page.setContent(
+ `
+ <ion-modal is-open="true" trigger="open-modal"></ion-modal>
+ `,
+ config
+ );
+ });
+ test('card modal should clean up animations on dismiss', async ({ page }, testInfo) => {
+ testInfo.annotations.push({
+ type: 'issue',
+ description: 'https://github.com/ionic-team/ionic-framework/issues/28352',
+ });
+
+ const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+ const modal = page.locator('ion-modal');
+
+ const initialAnimations = await modal.evaluate((el: HTMLIonModalElement) => {
+ return el.shadowRoot!.getAnimations();
+ });
+
+ // While the modal is open, it should have animations
+ expect(initialAnimations.length).toBeGreaterThan(0);
+
+ await modal.evaluate((el: HTMLIonModalElement) => {
+ el.dismiss();
+ });
+
+ await ionModalDidDismiss.next();
+
+ const currentAnimations = await modal.evaluate((el: HTMLIonModalElement) => {
+ return el.shadowRoot!.getAnimations();
+ });
+
+ // Once the modal has finished closing, there should be no animations
+ expect(currentAnimations.length).toBe(0);
+ });
+ });
+});

core/src/utils/overlays.ts

@@ -577,6 +577,12 @@ export const dismiss = async <OverlayDismissOptions>(
  overlay.didDismiss.emit({ data, role });
  overlay.didDismissShorthand?.emit({ data, role });
 
+ // Get a reference to all animations currently assigned to this overlay
+ // Then tear them down to return the overlay to its initial visual state
+ const animations = activeAnimations.get(overlay) || [];
+
+ animations.forEach((ani) => ani.destroy());
+
  activeAnimations.delete(overlay);
 
  /**