bug: [modal] enterAnimation causes modal not rendered properly

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

when giving param enterAnimation, the component attached will not be rendered.

a simple animation builder for instance below:

enterAnimation(baseEl) {
    return createAnimation()
      .addElement(baseEl)
      .duration(250)
      .fromTo('opacity', '0', '1');
}

However, with a custom leaveAnimation but without modifying enterAnimation, the modal can be rendered normally.

Expected Behavior

Component should be rendered when giving custom animations.

Steps to Reproduce

• use modal controller
• giving a simple animation as above to param enterAnimation
• present the modal
• the modal shows but without content

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

We are using Angular 13.

[tsungweihsu]

@sean-perkins Thanks Sean, the additional configurations from your example solved the problem. I had initially also an animation for the modal wrapper, but it did not work. I played around with your configurations and found that without beforeStyles or .shadowRoot, it will not work, which did work with previous version Ionic 5. Perhaps Ionic 6 makes these two configurations mandatory for the modal component.

@forOneWhoHasThisIssue So to make it work, it needs:

• an animation for the modal wrapper
• an animation setting for the wrapper, e.g. .beforeStyles() or .keyframes()
• .shadowRoot after baseEl

Thanks again, I’ll close the issue accordingly.

[sean-perkins]

Animating the modal element is more complicated than just a single animation. If we take inspiration from the existing animations that ship with Ionic, we can see that we need to additionally animate the modal wrapper.

For example:

private enterAnimation(baseEl) {
    const wrapperAnimation = createAnimation()
      .beforeStyles({
        transform: 'translateY(0) scale(1)'
      })
      .addElement(baseEl.shadowRoot.querySelector('.modal-wrapper'));

    return createAnimation()
      .addElement(baseEl)
      .duration(250)
      .fromTo('opacity', '0', '1')
      .addAnimation([wrapperAnimation]);
  }

<video src="https://user-images.githubusercontent.com/13732623/148156704-1f94e6c0-c2f8-474d-b5e0-67b1971f0d3e.mp4"></video>

Let me know if this resolves your issue.