chore(): add show-modal in component not in animation (#20833)

resolves #20827
This commit is contained in:
Liam DeBeasi
2020-03-20 12:23:09 -04:00
committed by GitHub
parent dae1ce8526
commit 879b90c3c4
3 changed files with 4 additions and 3 deletions

View File

@ -27,7 +27,6 @@ export const iosEnterAnimation = (
.addElement(baseEl) .addElement(baseEl)
.easing('cubic-bezier(0.32,0.72,0,1)') .easing('cubic-bezier(0.32,0.72,0,1)')
.duration(500) .duration(500)
.beforeAddClass('show-modal')
.addAnimation([backdropAnimation, wrapperAnimation]); .addAnimation([backdropAnimation, wrapperAnimation]);
if (presentingEl) { if (presentingEl) {

View File

@ -28,6 +28,5 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
.addElement(baseEl) .addElement(baseEl)
.easing('cubic-bezier(0.36,0.66,0.04,1)') .easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(280) .duration(280)
.beforeAddClass('show-modal')
.addAnimation([backdropAnimation, wrapperAnimation]); .addAnimation([backdropAnimation, wrapperAnimation]);
}; };

View File

@ -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 { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global'; 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); this.usersElement = await attachComponent(this.delegate, container, this.component, ['ion-page'], componentProps);
await deepReady(this.usersElement); await deepReady(this.usersElement);
writeTask(() => this.el.classList.add('show-modal'));
await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, this.presentingElement); await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, this.presentingElement);
const mode = getIonMode(this); const mode = getIonMode(this);