How to migrate custom animation to Ionic 4?

Ionic Framework
1

Hi!

I need migrate all my custom animations from ionic 3.9.2 to ionic 4 Ionic 4 have changed custom animations, i.e: PageTransition does not exist in Ionic 4 etc. I need help please!

Greetings!

import { Animation, PageTransition } from 'ionic-angular';

export class ModalFadeInRightTransition extends PageTransition {
    public init() {
        const ele = this.enteringView.pageRef().nativeElement;
        const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));

        wrapper.beforeStyles({ 'transform': 'translate3d(100%,0,0)', 'opacity': 1 });
        wrapper.fromTo('transform', 'translate3d(100%,0,0)', 'translate3d(0,0,0)');
        wrapper.fromTo('opacity', 1, 1);

        this
            .element(this.enteringView.pageRef())
            .duration(300)
            .easing('ease-in-out')
            .add(wrapper);
    }
}
2

First of all, it’s not an answer to your question

But I see that you had a custom-animation for a modal, so just wanted to share my experience:

I asked my self the same question, because I had a customized modal, I spend one or two hours or something of research about how to do a custom animation and how to custom style my modal, but finally I decided to just give up on my custom modal and replaced it for a Popover in v4

So like I said maybe not an answer directly, but maybe you could replace your custom modal with a popover too?

3

Hi @reedrichards Thank you for your answer.

I finally managed to migrate my custom animations.
I used this as an example: https://github.com/ionic-team/ionic/blob/master/core/src/components/modal/animations/md.enter.ts

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

export namespace CustomAnimation {
    'use strict';

    export function scaleUpEnter(AnimationC: Animation, baseEl: HTMLElement, opts?: any) {
        const baseAnimation = new AnimationC();

        const backdropAnimation = new AnimationC();
        backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));

        backdropAnimation.fromTo('opacity', 0.01, 0.4);

        const wrapperAnimation = new AnimationC();
        wrapperAnimation.addElement(baseEl.querySelector('.modal-wrapper'));

        wrapperAnimation
            .beforeStyles({ 'transform': 'scale3d(0.7,0.7,0.7)', 'opacity': 0.01 })
            .fromTo('transform', 'scale3d(0.7,0.7,0.7)', 'scale3d(1,1,1)')
            .fromTo('opacity', 0.01, 1);

        return Promise.resolve(baseAnimation
            .addElement(baseEl)
            .easing('cubic-bezier(0.68, -0.55, 0.265, 1.55)')
            .duration(200)
            .beforeAddClass('show-modal')
            .add(backdropAnimation)
            .add(wrapperAnimation)
        );
    }

    export function scaleUpLeave(AnimationC: Animation, baseEl: HTMLElement, opts?: any) {
        const baseAnimation = new AnimationC();

        const backdropAnimation = new AnimationC();
        backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));

        backdropAnimation.fromTo('opacity', 0.4, 0.0);

        const wrapperAnimation = new AnimationC();
        wrapperAnimation.addElement(baseEl.querySelector('.modal-wrapper'));

        wrapperAnimation
            .addElement(baseEl.querySelector('.modal-wrapper'))
            .beforeStyles({ 'transform': 'scale3d(1,1,1)', 'opacity': 1 })
            .fromTo('transform', 'scale3d(1,1,1)', 'scale3d(0.6,0.6,0.6)')
            .fromTo('opacity', 1, 0);

        return Promise.resolve(baseAnimation
            .addElement(baseEl)
            .easing('cubic-bezier(.1, .7, .1, 1)')
            .duration(200)            
            .add(backdropAnimation)
            .add(wrapperAnimation)
        );
    }   
}

//To use
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';
import { CustomAnimation } from 'path/to/custom-animation';

@Component({
  selector: 'modal-example',
  templateUrl: 'modal-example.html',
  styleUrls: ['./modal-example.css']
})
export class ModalExample {
  constructor(public modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      enterAnimation: CustomAnimation.scaleUpEnter,
      leaveAnimation: CustomAnimation.scaleUpLeave
    });
    return await modal.present();
  }
}

Greetings!

4 Likes
4

Congrats and thx for posting the all code that’s really cool :+1::+1::+1:

9

great job ! thanx for your snippet