How to create a smooth transition when moving from modal to another page in Ionic 5 app?

In my Ionic 5 / Angular app, I am trying to navigate from a Modal to another page in the app.

I’m able to navigate & close the modal, but the transition isn’t smooth.

I don’t know how to explain it exactly, but it just doesn’t look right.

Here is the button on my modal:

<ion-button color="primary" (click)="onSendMessage()">Send Message</ion-button>

onSendMessage() {
    this.modalCtrl.dismiss(null, 'cancel'); //
    this.router.navigateByUrl('conversation-list'); // need to smoothen out this transition
  }

As I said, this works "functionality-wise", but is there a way to make the smooth transition?

Also, here is where I’m creating this modal:

onSendMessage() {
    this.modalCtrl.create({
      component: CreateConversationComponent,
      componentProps: { mechanicToContact: this.loadedUser }
    })
      .then(modalEl => {
        modalEl.present();
      });
  }

Thanks a lot!

How about this?

this.modalCtrl.dismiss(null,'cancel').then(y=>{
this.router.navigateByUrl('conversation-list');
});

Or better yet use as the documentation says? perhaps send a signal downstairs to the handler of onWillDismiss/onDidDismiss and inform it to start the navigation?

Thanks for your response. Can you show me a code snippet that does this please?

It really depends on how you handle dismissing of your modal, should you always navigate after the closure of the modal? or it depends on some criteria? if you always wanna navigate on modal dismissing, simply convert your current method to

 async onSendMessage() {
    const createConversationModal = await this.modalCtrl.create({
      component: CreateConversationComponent,
      componentProps: { mechanicToContact: this.loadedUser }
    });
    createConversationModal.onDidDismiss().then(result => {
      this.router.navigateByUrl('conversation-list');
    });
    return await createConversationModal.present();
  }