javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(nav): fix transition to operate on ion-page element in case of host element, add a todo on iOS transition to figure this out later, and then remove the automatic appending of the .ion-page class

Browse Source
This commit is contained in:
Dan Bucholtz
2018-01-09 11:17:15 -06:00
parent aa6ace9280
commit d3eb071c32
3 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components/nav/nav.tsx
View File

@ -763,7 +763,7 @@ export function fireViewWillLifecycles(enteringView: ViewController, leavingView
export function attachViewToDom(nav: Nav, enteringView: ViewController, delegate: FrameworkDelegate) { export function attachViewToDom(nav: Nav, enteringView: ViewController, delegate: FrameworkDelegate) {
if (enteringView && enteringView.state === STATE_NEW) { if (enteringView && enteringView.state === STATE_NEW) {
return delegate.attachViewToDom(nav.element, enteringView.component, enteringView.data, ['ion-page']).then((mountingData) => { return delegate.attachViewToDom(nav.element, enteringView.component, enteringView.data, []).then((mountingData) => {
Object.assign(enteringView, mountingData); Object.assign(enteringView, mountingData);
enteringView.state = STATE_ATTACHED; enteringView.state = STATE_ATTACHED;
}); });

4
packages/core/src/components/nav/transitions/transition.ios.ts
View File

@ -11,6 +11,10 @@ const CENTER = '0%';
const OFF_OPACITY = 0.8; const OFF_OPACITY = 0.8;
const SHOW_BACK_BTN_CSS = 'show-back-button'; const SHOW_BACK_BTN_CSS = 'show-back-button';
// TODO - make sure this uses the `ion-page` logic from the md transition
// DO this later since the transition is broke as a joke anyway
// Dan B 1/9/2018
export function buildIOSTransition(rootTransition: Transition, enteringView: ViewController, leavingView: ViewController, opts: AnimationOptions): Promise<Transition> { export function buildIOSTransition(rootTransition: Transition, enteringView: ViewController, leavingView: ViewController, opts: AnimationOptions): Promise<Transition> {
rootTransition.enteringView = enteringView; rootTransition.enteringView = enteringView;

15
packages/core/src/components/nav/transitions/transition.md.ts
View File

@ -12,7 +12,9 @@ export function buildMdTransition(rootTransition: Transition, enteringView: View
rootTransition.enteringView = enteringView; rootTransition.enteringView = enteringView;
rootTransition.leavingView = leavingView; rootTransition.leavingView = leavingView;
rootTransition.addElement(enteringView.element); const ionPageElement = getIonPageElement(enteringView.element);
rootTransition.addElement(ionPageElement);
rootTransition.beforeRemoveClass('hide-page'); rootTransition.beforeRemoveClass('hide-page');
const backDirection = (opts.direction === 'back'); const backDirection = (opts.direction === 'back');
@ -27,7 +29,7 @@ export function buildMdTransition(rootTransition: Transition, enteringView: View
.fromTo('opacity', 0.01, 1, true); .fromTo('opacity', 0.01, 1, true);
} }
const enteringToolbarEle = enteringView.element.querySelector('ion-toolbar'); const enteringToolbarEle = ionPageElement.querySelector('ion-toolbar');
if (enteringToolbarEle) { if (enteringToolbarEle) {
const enteringToolBar = rootTransition.create(); const enteringToolBar = rootTransition.create();
enteringToolBar.addElement(enteringToolbarEle); enteringToolBar.addElement(enteringToolbarEle);
@ -50,9 +52,16 @@ export function buildMdTransition(rootTransition: Transition, enteringView: View
// leaving content // leaving content
rootTransition.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)'); rootTransition.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
const leavingPage = rootTransition.create(); const leavingPage = rootTransition.create();
leavingPage.addElement(leavingView.element); leavingPage.addElement(getIonPageElement(leavingView.element));
rootTransition.add(leavingPage.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM).fromTo('opacity', 1, 0)); rootTransition.add(leavingPage.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM).fromTo('opacity', 1, 0));
} }
return Promise.resolve(rootTransition); return Promise.resolve(rootTransition);
} }
function getIonPageElement(element: HTMLElement) {
if (element.tagName.toLowerCase() === 'ion-page') {
return element;
}
return element.querySelector('ion-page');
}