Adding custom transitions/custom modal transition

It looks as if setTransition has gone out the window so far in Ionic 4 (beta 8). Anyone know of a workaround?

@jbgomez21 was able to build a custom animation in Ionic v4 / Angular v6:

This appears to be only for modals. Do you have any examples for page transitions for Ionic 4?

Nope. While migrating I choose an easier path, no more custom modal but popover instead

I am also looking for ionic 4 page transitions

Hii @onderceylan Will it work in ionic 4 ?

With Ionic5 a really simple way to customize your modal transitions:

Step 1: create the animations you want for the modal

import { createAnimation } from '@ionic/core';

export const modalEnterAnimation = () => createAnimation()
  .fromTo('top', '-350px', '0px');  //add any animation here

export const modalLeaveAnimation = () => createAnimation()
  .fromTo('top', '0px', '-350px'); //add any animation here

Step 2: create the modal itself and add the animations

  async openAppBanner() {
    const modal = await this.modalCtrl.create({
      component: AppBannerComponent,
      showBackdrop: false,
      enterAnimation: modalEnterAnimation,
      leaveAnimation: modalLeaveAnimation
    await modal.present();
1 Like