mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
129 lines
3.5 KiB
TypeScript
129 lines
3.5 KiB
TypeScript
import {Transition} from './transition';
|
|
import {Animation} from '../animations/animation';
|
|
|
|
const TRANSLATEY = 'translateY';
|
|
const OFF_BOTTOM = '40px';
|
|
const CENTER = '0px'
|
|
const SHOW_NAVBAR_CSS = 'show-navbar';
|
|
const SHOW_VIEW_CSS = 'show-view';
|
|
const SHOW_BACK_BTN_CSS = 'show-back-button';
|
|
const TABBAR_HEIGHT = '69px';
|
|
|
|
|
|
class MDTransition extends Animation {
|
|
|
|
constructor(navCtrl, opts) {
|
|
opts.renderDelay = 160;
|
|
super(null, opts);
|
|
|
|
// what direction is the transition going
|
|
let backDirection = (opts.direction === 'back');
|
|
|
|
// get entering/leaving views
|
|
let enteringView = navCtrl.getStagedEnteringView();
|
|
let leavingView = navCtrl.getStagedLeavingView();
|
|
|
|
// do they have navbars?
|
|
let enteringHasNavbar = enteringView.hasNavbar();
|
|
let leavingHasNavbar = leavingView && leavingView.hasNavbar();
|
|
|
|
|
|
// entering content item moves in bottom to center
|
|
let enteringContent = new Animation(enteringView.contentRef());
|
|
enteringContent
|
|
.before.addClass(SHOW_VIEW_CSS)
|
|
.before.setStyles({ zIndex: enteringView.index });
|
|
this.add(enteringContent);
|
|
|
|
if (backDirection) {
|
|
this.duration(200).easing('cubic-bezier(0.47,0,0.745,0.715)');
|
|
enteringContent.fromTo(TRANSLATEY, CENTER, CENTER);
|
|
|
|
} else {
|
|
this.duration(280).easing('cubic-bezier(0.36,0.66,0.04,1)');
|
|
enteringContent
|
|
.fromTo(TRANSLATEY, OFF_BOTTOM, CENTER)
|
|
.fadeIn();
|
|
}
|
|
|
|
|
|
// entering navbar
|
|
if (enteringHasNavbar) {
|
|
let enteringNavBar = new Animation(enteringView.navbarRef());
|
|
enteringNavBar
|
|
.before.addClass(SHOW_NAVBAR_CSS)
|
|
.before.setStyles({ zIndex: enteringView.index + 10 });
|
|
this.add(enteringNavBar);
|
|
|
|
if (backDirection) {
|
|
enteringNavBar.fromTo(TRANSLATEY, CENTER, CENTER);
|
|
|
|
} else {
|
|
enteringNavBar
|
|
.fromTo(TRANSLATEY, OFF_BOTTOM, CENTER)
|
|
.fadeIn();
|
|
}
|
|
|
|
if (enteringView.enableBack()) {
|
|
let enteringBackButton = new Animation(enteringView.backBtnRef());
|
|
enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
|
|
enteringNavBar.add(enteringBackButton);
|
|
}
|
|
}
|
|
|
|
// setup leaving view
|
|
if (leavingView) {
|
|
// leaving content
|
|
let leavingContent = new Animation(leavingView.contentRef());
|
|
this.add(leavingContent);
|
|
leavingContent
|
|
.before.addClass(SHOW_VIEW_CSS)
|
|
.before.setStyles({ zIndex: leavingView.index });
|
|
|
|
|
|
if (backDirection) {
|
|
this.duration(200).easing('cubic-bezier(0.47,0,0.745,0.715)');
|
|
leavingContent
|
|
.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM)
|
|
.fadeOut();
|
|
}
|
|
|
|
|
|
if (leavingHasNavbar) {
|
|
if (backDirection) {
|
|
let leavingNavBar = new Animation(leavingView.navbarRef());
|
|
this.add(leavingNavBar);
|
|
|
|
leavingNavBar
|
|
.before.setStyles({ zIndex: leavingView.index + 10 })
|
|
.fadeOut();
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
let viewLength = navCtrl.length();
|
|
if ((viewLength === 1 || viewLength === 2) && navCtrl.tabs) {
|
|
let tabBarEle = navCtrl.tabs.elementRef.nativeElement.querySelector('ion-tab-bar-section');
|
|
let tabBar = new Animation(tabBarEle);
|
|
|
|
if (viewLength === 1 && backDirection) {
|
|
tabBar
|
|
.fromTo('height', '0px', TABBAR_HEIGHT)
|
|
.fadeIn();
|
|
|
|
} else if (viewLength === 2 && !backDirection) {
|
|
tabBar
|
|
.fromTo('height', TABBAR_HEIGHT, '0px')
|
|
.fadeOut();
|
|
}
|
|
|
|
this.add(tabBar);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Transition.register('md', MDTransition);
|