Adding custom transitions/custom modal transition

Ionic Framework ionic-v3
22

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

23

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

24

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

25

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

26

I am also looking for ionic 4 page transitions

27

Hii @onderceylan Will it work in ionic 4 ?

28

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()
  .addElement(document.querySelector('.modal-wrapper'))
  .duration(500)
  .fromTo('top', '-350px', '0px');  //add any animation here

export const modalLeaveAnimation = () => createAnimation()
  .addElement(document.querySelector('.modal-wrapper'))
  .duration(500)
  .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