Ionic 3 custom page transitions: "slide-up" and "fancy"

fancy-transition.ts

import { Animation, PageTransition } from "ionic-angular";
import { isPresent } from "ionic-angular/util/util";

const EASINGS = {
    outBack: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
    inOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
    magnet: 'cubic-bezier(0.85, 0.06, 0.15, 0.94)'
}
const DURATION = 500;

export class FancyTransition extends PageTransition {

    init() {
        super.init();

        this.duration(isPresent(this.opts.duration) ? this.opts.duration : DURATION);
        this.easing(isPresent(this.opts.easing) ? this.opts.easing : EASINGS.inOutCubic);
        const enteringHasNavbar = (this.enteringView && this.enteringView.hasNavbar());

        if (this.enteringView) {
            const enteringPageEle: Element = this.enteringView.pageRef().nativeElement;

            const enteringContent = new Animation(this.plt, this.enteringView.contentRef());
            enteringContent.element(enteringPageEle.querySelectorAll('ion-header > *:not(ion-navbar),ion-footer > *'));
            this.add(enteringContent);

            enteringContent
                .beforeClearStyles(['opacity'])
                .fromTo('scale', 0.3, 1, true)
                .fromTo('opacity', 0.01, 1, true);

            if (enteringHasNavbar) {
                const enteringNavbarEle = enteringPageEle.querySelector('ion-navbar');

                const enteringNavBar = new Animation(this.plt, enteringNavbarEle);
                this.add(enteringNavBar);

                enteringNavBar.fromTo('translateX', '100%', '0', true);

                const enteringTitle = new Animation(this.plt, enteringNavbarEle.querySelector('ion-title'));
                const enteringNavbarItems = new Animation(this.plt, enteringNavbarEle.querySelectorAll('ion-buttons,[menuToggle]'));
                const enteringNavbarBg = new Animation(this.plt, enteringNavbarEle.querySelector('.toolbar-background'));
                const enteringBackButton = new Animation(this.plt, enteringNavbarEle.querySelector('.back-button'));
                enteringNavBar
                    .add(enteringTitle)
                    .add(enteringNavbarItems)
                    .add(enteringNavbarBg)
                    .add(enteringBackButton);

                enteringTitle.fromTo('opacity', 0.01, 1, true);
                enteringNavbarItems.fromTo('opacity', 0.01, 1, true);

                enteringNavbarBg
                    .beforeClearStyles(['opacity'])
                    .fromTo('opacity', 0.01, 1, true);

                if (this.enteringView.enableBack()) {
                    enteringBackButton
                        .beforeAddClass('show-back-button')
                        .fromTo('opacity', 0.01, 1, true);

                    const enteringBackBtnText = new Animation(this.plt, enteringNavbarEle.querySelector('.back-button-text'));
                    enteringBackBtnText.fromTo('opacity', 0.01, 1, true);
                    enteringNavBar.add(enteringBackBtnText);
                } else {
                    enteringBackButton.beforeRemoveClass('show-back-button');
                }
            }
        }

        if (this.leavingView && this.leavingView.pageRef()) {
            const leavingContent = new Animation(this.plt, this.leavingView.pageRef());
            this.add(leavingContent);

            leavingContent
                .fromTo('filter', "grayscale(0)", "grayscale(90%)", true)
                .afterClearStyles(['filter']);
        }
    }
}

slide-up-transition.ts

import { Animation } from "ionic-angular/animations/animation";
import { isPresent } from "ionic-angular/util/util";
import { PageTransition } from "ionic-angular/transitions/page-transition";

const DURATION = 500;

export class SlideUpTransition extends PageTransition {

    init() {
        super.init();
        this.duration(isPresent(this.opts.duration) ? this.opts.duration : DURATION);
        const backDirection = (this.opts.direction === 'back');

        if (this.enteringView) {
            //animating new page
            const enteringContent = new Animation(this.plt, this.enteringView.pageRef());
            this.add(enteringContent);

            if (backDirection) {
                enteringContent.fromTo("transform", "translateY(0)", "translateY(100%)", true); 
            } else {
                enteringContent.fromTo("transform", "translateY(100%)", "translateY(0)",  true);
            }

            if (this.enteringView.enableBack()) {
                const enteringPage = this.enteringView.pageRef().nativeElement;
                const enteringNavBar = new Animation(this.plt, this.enteringView.pageRef());
                this.add(enteringNavBar);
    
                const enteringBackButton = new Animation(this.plt, enteringPage.querySelector('.back-button'));
                enteringBackButton.beforeAddClass('show-back-button')
                enteringNavBar.add(enteringBackButton);
            }
        }

        if (this.leavingView && this.leavingView.pageRef()) {
            //animating old page
            const leavingContent = new Animation(this.plt, this.leavingView.pageRef());
            this.add(leavingContent);

            if (backDirection) {
                leavingContent.fromTo("filter", "grayscale(100%)", "grayscale(0)", true);
            } else {
                leavingContent
                    .fromTo("filter", "grayscale(0)", "grayscale(100%)", true)
                    .afterClearStyles(["filter"]);
            }
        }
    }
}