How does ionic3 implement elegant popover animations

How does that work in Ion 4?

Ionic4 is more generic than ionic3 in order to get rid of framework dependencies.

import { Animation } from '@ionic/core';
export functionModalFromBottomEnter(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> { const baseAnimation = new AnimationC(); // backdropAnimation const backdropAnimation = new AnimationC(); const backdropElem = baseEl.querySelector('ion-backdrop');
    backdropAnimation.addElement(backdropElem);
    backdropAnimation.beforeStyles({ 'z-index'Opacity: 0, opacity: 0.3, visibility:'visible'}); // Animation configuration for the main wrapper const wrapperAnimation = new AnimationC(); const wrapperElem = baseEl.querySelector('.modal-wrapper');
    wrapperAnimation.addElement(wrapperElem);
    wrapperAnimation.beforeStyles({ height: '60%', position: 'absolute', bottom: 0});
    wrapperAnimation.fromTo('transform'.'translateY(100%)'.'translateY(0)');
    //
    return Promise.resolve(baseAnimation
        .duration(300)
        .easing('ease')
        .add(backdropAnimation)
        .add(wrapperAnimation));
}

export functionModalFromBottomLeave(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> { const baseAnimation = new AnimationC(); // backdropAnimation const backdropAnimation = new AnimationC(); const backdropElem = baseEl.querySelector('ion-backdrop');
    backdropAnimation.addElement(backdropElem);
    backdropAnimation.beforeStyles({ visibility: 'hidden'}); // Animation configuration for the main wrapper const wrapperAnimation = new AnimationC(); const wrapperElem = baseEl.querySelector('.modal-wrapper');
    wrapperAnimation.addElement(wrapperElem);
    wrapperAnimation.fromTo('transform'.'translateY(0)'.'translateY(100%)');
    return Promise.resolve(baseAnimation
        .duration(300)
        .easing('ease')
        .add(backdropAnimation)
        .add(wrapperAnimation));
}
Copy the code

Code should be well understood, first set a basic Animation baseAnimation, then each layer generally have a backdrop and the main container wrapper, so the query to the corresponding dom elements, respectively, set Animation, it is ok to add to the baseAnimation.

Then use the page like this:

import { ModalFromBottomEnter, ModalFromBottomLeave } from 'src/app/modal.transitions'; . this.modalController.create({ component: ModalPage enterAnimation: ModalFromBottomEnter, leaveAnimation: ModalFromBottomLeave });Copy the code