Ionic-framework: bug: Animation stopped working on Ionic 4.8.0

[mtshare]

Bug Report

Ionic version:
[x] 4.8.0

Current behavior:
Unhandled Promise rejection: – "HTMLElement is not a constructor (evaluating 'new AnimationC()')" – "; Zone:" – "" – "; Task:" – "Promise.then" – "; Value:"

Expected behavior:
Animation to works properly as on Ionic 4.7.4

Steps to reproduce:

let ticketModal = await this.modalCtrl.create({
    component: ModalTicket,
    componentProps: {
        purchase: purchase
    },
    backdropDismiss: true,
    enterAnimation: CustomAnimation.scaleUpEnter,
    leaveAnimation: CustomAnimation.scaleUpLeave
});
return ticketModal.present();

Related code:

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


export namespace CustomAnimation {
    'use strict';

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

        const backdropAnimation = new AnimationC();
        backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
        backdropAnimation.fromTo('opacity', 0.01, 0.6);

        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.6, 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)
        );
    }   
}

[liamdebeasi]

Thanks for the issue. I've released a dev build with a fix for this. Can you give it a try and let me know if it resolves your issue?

If using @ionic/angular: npm i @ionic/[email protected]
If use @ionic/core: npm i @ionic/[email protected]

[mtshare]

The issues is fixed in your dev build!
I'm using the @ionic/angular

Thanks, hope to see this fix in the next stable release.

[euargon]

Using @ionic/core and still having the issue :(

[liamdebeasi]

@euargon can you provide a reproduction of the issue you are seeing? Also, are you testing against the dev build or the latest stable version of Ionic?

[euargon]

I was testing against the lastest stable version and now against dev.

I'm just trying to use custom animations to change the backdrop opacity, with code like this:

const popover = await this.popoverController.create({ component: UsuarioVisualizarPermisoComponent, enterAnimation: myEnterAnimation, cssClass: 'custom-bottom-popover', event: event, componentProps: { callback: this.qrVisualizarCiudadano.bind(this) } }); return await popover.present();

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

export function myEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): Promise {

const baseAnimation = new AnimationC();

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

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

wrapperAnimation.beforeStyles({ 'opacity': 1 })
    .fromTo('translateY', '100%', '0%');

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

return Promise.resolve(baseAnimation
    .addElement(baseEl)
    .easing('cubic-bezier(0.36,0.66,0.04,1)')
    .duration(400)
    .beforeAddClass('show-modal')
    .add(backdropAnimation)
    .add(wrapperAnimation));

}`

Thanks!

[liamdebeasi]

Does it work on the dev build now? If not, what error are you getting?

[euargon]

No... I've tried again but it doesn't work.

ERROR Error: Uncaught (in promise): TypeError: AnimationC is not a constructor
TypeError: AnimationC is not a constructor

[liamdebeasi]

@euargon I published a new dev build with a fix. Can you give it a try and let me know if it resolves your issue?

If using @ionic/angular: npm i @ionic/[email protected]
If use @ionic/core: npm i @ionic/[email protected]

[apiaget]

Hello !
I also encountered the same problem using a code largely inspired from this tutorial : https://www.joshmorony.com/create-a-custom-modal-page-transition-animation-in-ionic/

I tried the build @ionic/[email protected].

The same code that produced an error in 4.8 works without any error in the dev build now.

Thank you and hope to see the dev build fix in the next release !

[liamdebeasi]

Glad to hear the dev build fixes it. My plan is to push 4.8.1 later today early next week. I will update this thread when that is released. 👍

[mtshare]

@liamdebeasi Thanks so much! Great work!

[euargon]

@liamdebeasi it works with @ionic/[email protected]

Thanks a lot!!!! :)

[liamdebeasi]

I have released Ionic 4.8.1 with this fix. If you run into any other errors, please open a new issue. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.