Custom Ionic 2 & 3 Page Flip Effect Transition

transitions.scss

@-webkit-keyframes flip-leave-prev {
    0% { -webkit-transform: perspective(120px) rotateY(0deg); opacity: 1; }
    50% { -webkit-transform: perspective(120px) rotateY(90deg); opacity: 0; }
    100% { -webkit-transform: perspective(120px) rotateY(180deg);  opacity: 0; }
}
@keyframes flip-leave-prev {
    0% { transform: perspective(120px) rotateY(0deg); opacity: 1; }
    50% { transform: perspective(120px) rotateY(90deg); opacity: 0; }
    100% { transform: perspective(120px) rotateY(180deg); opacity: 0; }
}

@-webkit-keyframes flip-leave-next {
    0% { -webkit-transform: perspective(120px) rotateY(0deg); opacity: 1; }
    50% { -webkit-transform: perspective(120px) rotateY(-90deg); opacity: 0;  }
    100% { -webkit-transform: perspective(120px) rotateY(-180deg); opacity: 0; }
}
@keyframes flip-leave-next {
    0% { transform: perspective(120px) rotateY(0deg); opacity: 1; }
    50% { transform: perspective(120px) rotateY(-90deg); opacity: 0; }
    100% { transform: perspective(120px) rotateY(-180deg); opacity: 0; }
}

@-webkit-keyframes flip-enter-prev {
    0% { -webkit-transform: perspective(120px) rotateY(-180deg); opacity: 0; }
    50% { -webkit-transform: perspective(120px) rotateY(-90deg); opacity: 1; }
    100% { -webkit-transform: perspective(120px) rotateY(0deg); opacity: 1; }
}
@keyframes flip-enter-prev {
    0% { transform: perspective(120px) rotateY(-180deg); opacity: 0; }
    50% { transform: perspective(120px) rotateY(-90deg); opacity: 1; }
    100% { transform: perspective(120px) rotateY(0deg); opacity: 1; }
}

@-webkit-keyframes flip-enter-next {
    0% { -webkit-transform: perspective(120px) rotateY(180deg); opacity: 0; }
    50% { -webkit-transform: perspective(120px) rotateY(90deg); opacity: 1; }
    100% { -webkit-transform: perspective(120px) rotateY(0deg); opacity: 1; }
}
@keyframes flip-enter-next {
    0% { transform: perspective(120px) rotateY(180deg); opacity: 0; }
    50% { transform: perspective(120px) rotateY(90deg); opacity: 1; }
    100% { transform: perspective(120px) rotateY(0deg); opacity: 1; }
}

.ion-page.show-page.flip-leave-prev { -webkit-animation: flip-leave-prev 0.4s normal ease-in-out; animation: flip-leave-prev 0.4s normal ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ion-page.show-page.flip-leave-next { -webkit-animation: flip-leave-next 0.4s normal ease-in-out; animation: flip-leave-next 0.4s normal ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ion-page.show-page.flip-enter-prev { -webkit-animation: flip-enter-prev 0.4s normal ease-in-out; animation: flip-enter-prev 0.4s normal ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ion-page.show-page.flip-enter-next { -webkit-animation: flip-enter-next 0.4s normal ease-in-out; animation: flip-enter-next 0.4s normal ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

transitions.ts

export class PageFlip extends PageTransition {

    init() {
        super.init();

        let plt = this.plt,
            leavingView = this.leavingView,
            enteringView = this.enteringView,
            opts = this.opts,
            backDirection = (opts.direction === 'back');

        if (enteringView) {
            let enteringPage = new Animation(plt, enteringView.pageRef());

            if (backDirection) {
                this.duration(opts.duration || 400);
                this.add(enteringPage);
                enteringPage
                    .beforeAddClass('flip-enter-prev')
                    .afterRemoveClass('flip-enter-prev');
                enteringPage.beforeStyles({ 'z-index': 101 });
            } else {
                this.duration(opts.duration || 400);
                this.add(enteringPage);
                enteringPage
                    .beforeAddClass('flip-enter-next')
                    .afterRemoveClass('flip-enter-next');
            }
        }

        if (leavingView) {
            let leavingPage = new Animation(plt, leavingView.pageRef());

            if (backDirection) {
                this.duration(opts.duration || 400);
                this.add(leavingPage);
                leavingPage
                    .beforeAddClass('flip-leave-prev')
                    .afterRemoveClass('flip-leave-prev');
                leavingPage.beforeStyles({ 'z-index': 100 });
            } else {
                this.duration(opts.duration || 400);
                this.add(leavingPage);
                leavingPage
                    .beforeAddClass('flip-leave-next')
                    .afterRemoveClass('flip-leave-next');
            };
        }
    }
}