Ionic 4 modal animations

Ionic Framework
1

I want to animate my modal in sideways so as it looks like a normal page entering.

In the docs there are two animation attributes I can initialise the modal with:

  • enterAnimation
  • LeaveAnimation
const modal = await this.modalController.create({
      component: MapPage,
      componentProps: { value: 123 },
      enterAnimation: <animation here>,
      leaveAnimations: <animation here>
    });

both are of type AnimationBuilder… but i can figure out how to assign an animation to them.

Any help would be great…

2

Were you able to find solution?

3

I have been looking at the same issue today. I basically want to re-use whatever the animation is for the action-sheet modal where the modal slides up from the bottom, over the footer (I want custom content in this modal, not just buttons, thus why I don’t want to use action-sheet). I thought I would be able to pass a stock animation name to the modalController.create() in the options, but no luck.

It seems unusual because AnimationBuilder looks like a helper class to create AnimationFactory instances, not a class that can contain/store animations, so I’m unsure how this would work: https://angular.io/api/animations/AnimationBuilder

Also tried messing around w/ the usual Angular animations API, but it doesn’t seem related here: https://angular.io/guide/animations

UPDATE: For my use case, turns out the default entry animation worked fine, I just needed to update the default modal position absolutely. Still curious about how this should work, at any rate.

4

this guide can help you