app.component.ts

app.component.ts

import { PageTopTransition } from './core/transitions/page-top.trasnsition';

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'HomePage';

  constructor(
       platform: Platform,
       statusBar: StatusBar,
       splashScreen: SplashScreen
       private config: Config,
   ) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
       this.applyCustomsModalTransition();
    });
  }
    
   private applyCustomsModalTransition(){
    this.config.setTransition('modal-top-slide-in', ModalTopSlideIn);
    this.config.setTransition('modal-top-slide-out', ModalTopSlideOut);
    this.config.setTransition('page-left-transition', PageLeftTransition);
    this.config.setTransition('page-right-transition', PageRightTransition);
    this.config.setTransition('page-top-transition', PageTopTransition);
  }
}

page-top.trasnsition.ts

import { ElementRef } from '@angular/core';
import { Animation, PageTransition} from 'ionic-angular';

export function isPresent(val: any): val is any { return val !== undefined && val !== null; }

const DURATION = 500;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
const OPACITY = 'opacity';
const TRANSFORM = 'transform';
const TRANSLATEY = 'translateY';
const CENTER = '0%';
const OFF_OPACITY = 0.8;

export class PageTopTransition extends PageTransition {

  init() {
    super.init();

    const plt = this.plt;
    const OFF_TOP = '-99.5%';
    const OFF_BOTTOM = '99.5%';
    const enteringView = this.enteringView;
    const leavingView = this.leavingView;
    const opts = this.opts;

    this.duration(isPresent(opts.duration) ? opts.duration : DURATION);
    this.easing(isPresent(opts.easing) ? opts.easing : EASING);

    const backDirection = (opts.direction === 'back');

    if (enteringView) {
      // get the native element for the entering page
      const enteringPageEle: ElementRef = enteringView.pageRef();
      const enteringPageAnimation = new Animation(plt, enteringPageEle);
      this.add(enteringPageAnimation);

      if (backDirection) {
        // entering content, back direction
        enteringPageAnimation
          .fromTo(TRANSLATEY, OFF_BOTTOM, CENTER, true)
          .fromTo(OPACITY, OFF_OPACITY, 1, true);

      } else {
        // entering content, forward direction
        enteringPageAnimation
          .beforeClearStyles([OPACITY])
          .fromTo(OPACITY, OFF_OPACITY, 1, true)
          .fromTo(TRANSLATEY, OFF_TOP, CENTER, true);
      }

    }

    // setup leaving view
    if (leavingView && leavingView.pageRef()) {

      // leaving page
      const leavingPageEle: ElementRef = leavingView.pageRef();
      const leavingPageAnimation = new Animation(plt, leavingPageEle);
      this.add(leavingPageAnimation);

      if (backDirection) {
        // leaving content, back direction
        leavingPageAnimation
          .beforeClearStyles([OPACITY])
          .fromTo(TRANSLATEY, CENTER, '-100%');

      } else {
        // leaving content, forward direction
        leavingPageAnimation
          .fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
          .fromTo(OPACITY, 1, OFF_OPACITY)
          .afterClearStyles([TRANSFORM, OPACITY]);
      }

    }
  }

}

yourpage.ts

this.navCtrl.push('YourPage', null, {
  animation: 'page-top-transition',
});