From 879b90c3c471f9fd46ed98c4013f0e45912a6903 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 20 Mar 2020 12:23:09 -0400
Subject: [PATCH] chore(): add show-modal in component not in animation
 (#20833)

resolves #20827
---
 core/src/components/modal/animations/ios.enter.ts | 1 -
 core/src/components/modal/animations/md.enter.ts  | 1 -
 core/src/components/modal/modal.tsx               | 5 ++++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts
index b21f237cf0..cc3295cfd1 100644
--- a/core/src/components/modal/animations/ios.enter.ts
+++ b/core/src/components/modal/animations/ios.enter.ts
@@ -27,7 +27,6 @@ export const iosEnterAnimation = (
     .addElement(baseEl)
     .easing('cubic-bezier(0.32,0.72,0,1)')
     .duration(500)
-    .beforeAddClass('show-modal')
     .addAnimation([backdropAnimation, wrapperAnimation]);
 
   if (presentingEl) {
diff --git a/core/src/components/modal/animations/md.enter.ts b/core/src/components/modal/animations/md.enter.ts
index 750d72d2d5..c37d1a5765 100644
--- a/core/src/components/modal/animations/md.enter.ts
+++ b/core/src/components/modal/animations/md.enter.ts
@@ -28,6 +28,5 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
     .addElement(baseEl)
     .easing('cubic-bezier(0.36,0.66,0.04,1)')
     .duration(280)
-    .beforeAddClass('show-modal')
     .addAnimation([backdropAnimation, wrapperAnimation]);
 };
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index b7386cb376..36fcb37dbd 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h, writeTask } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
@@ -144,6 +144,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
     };
     this.usersElement = await attachComponent(this.delegate, container, this.component, ['ion-page'], componentProps);
     await deepReady(this.usersElement);
+
+    writeTask(() => this.el.classList.add('show-modal'));
+
     await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, this.presentingElement);
 
     const mode = getIonMode(this);