diff --git a/ionic/animations/animation.ts b/ionic/animations/animation.ts index d6f199f2bd..2894fadcba 100644 --- a/ionic/animations/animation.ts +++ b/ionic/animations/animation.ts @@ -110,6 +110,13 @@ export class Animation { return this._duration || (this._parent && this._parent.duration()) || 0; } + clearDuration() { + this._duration = null; + for (let i = 0, l = this._chld.length; i < l; i++) { + this._chld[i].clearDuration(); + } + } + easing(name, opts) { if (arguments.length) { this._easing = { @@ -184,6 +191,7 @@ export class Animation { }, setStyles: (styles) => { this._bfSty = styles; + return this; } } } diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index 59c3337175..3cfce2f459 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -113,6 +113,10 @@ ion-view.pane-view { flex-direction: column; } +ion-view.pane-view { + background: transparent; +} + ion-view { display: none; position: absolute; diff --git a/ionic/components/nav-bar/nav-bar.scss b/ionic/components/nav-bar/nav-bar.scss index 42eb78acce..5bee678ad8 100644 --- a/ionic/components/nav-bar/nav-bar.scss +++ b/ionic/components/nav-bar/nav-bar.scss @@ -5,13 +5,10 @@ ion-navbar.toolbar { position: absolute; -} - -ion-navbar { - transform: translate3d(100%, 0px, 0px); + display: none; &.show-navbar { - transform: translate3d(0px, 0px, 0px); + display: flex; } } diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts index 19a93a178d..1b089426df 100644 --- a/ionic/components/nav-bar/nav-bar.ts +++ b/ionic/components/nav-bar/nav-bar.ts @@ -79,7 +79,7 @@ export class Navbar extends ToolbarBase { renderer.setElementClass(elementRef, 'toolbar', true); this.app = app; - viewCtrl && viewCtrl.navbarView(this); + viewCtrl && viewCtrl.setNavbar(this); this.bbIcon = config.get('backButtonIcon'); this.bbDefault = config.get('backButtonText'); diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index c793d8c577..297b6d448d 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -476,6 +476,7 @@ export class NavController extends Ion { let transAnimation = Transition.create(this, opts); if (opts.animate === false) { // force it to not animate the elements, just apply the "to" styles + transAnimation.clearDuration(); transAnimation.duration(0); } diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index 26ed50f380..18b17530b7 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -230,7 +230,7 @@ export class Nav extends NavController { viewCtrl.setInstance(componentRef.instance); // remember the ElementRef to the content that was just created - viewCtrl.viewElementRef(componentRef.location); + viewCtrl.setContentRef(componentRef.location); // get the NavController's container for navbars, which is // the place this NavController will add each ViewController's navbar diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index 15b762e3ee..a5d5152d65 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -13,8 +13,6 @@ export class ViewController { this.instance = null; this.state = 0; this.disposals = []; - - this.navbarTemplateRef = null; } setContent(content) { @@ -104,37 +102,42 @@ export class ViewController { * @private */ setNavbarTemplateRef(templateRef) { - this.navbarTemplateRef = templateRef; + this._nbTmpRef = templateRef; } /** * @private */ getNavbarTemplateRef() { - return this.navbarTemplateRef; - } - - /** - * TODO - * @param {TODO} val TODO - * @returns {TODO} TODO - */ - viewElementRef(val) { - if (arguments.length) { - this._vwEle = val; - } - return this._vwEle; + return this._nbTmpRef; } /** * TODO * @returns {TODO} TODO */ - navbarView() { - if (arguments.length) { - this._nbView = arguments[0]; - } - return this._nbView; + setContentRef(contentElementRef) { + this._cntRef = contentElementRef; + } + + /** + * TODO + * @returns {TODO} TODO + */ + contentRef() { + return this._cntRef; + } + + setNavbar(navbarView) { + this._nbVw = navbarView; + } + + /** + * TODO + * @returns {TODO} TODO + */ + getNavbar() { + return this._nbVw; } /** @@ -142,10 +145,8 @@ export class ViewController { * @returns {TODO} TODO */ navbarRef() { - let navbarView = this.navbarView(); - if (navbarView) { - return navbarView.getElementRef(); - } + let navbar = this.getNavbar(); + return navbar && navbar.getElementRef(); } /** @@ -153,10 +154,8 @@ export class ViewController { * @returns {TODO} TODO */ titleRef() { - let navbarView = this.navbarView(); - if (navbarView) { - return navbarView.getTitleRef(); - } + let navbar = this.getNavbar(); + return navbar && navbar.getTitleRef(); } /** @@ -164,10 +163,8 @@ export class ViewController { * @returns {TODO} TODO */ navbarItemRefs() { - let navbarView = this.navbarView(); - if (navbarView) { - return navbarView.getItemRefs(); - } + let navbar = this.getNavbar(); + return navbar && navbar.getItemRefs(); } /** @@ -175,10 +172,8 @@ export class ViewController { * @returns {TODO} TODO */ backBtnRef() { - let navbarView = this.navbarView(); - if (navbarView) { - return navbarView.getBackButtonRef(); - } + let navbar = this.getNavbar(); + return navbar && navbar.getBackButtonRef(); } /** @@ -186,10 +181,8 @@ export class ViewController { * @returns {TODO} TODO */ backBtnTextRef() { - let navbarView = this.navbarView(); - if (navbarView) { - return navbarView.getBackButtonTextRef(); - } + let navbar = this.getNavbar(); + return navbar && navbar.getBackButtonTextRef(); } /** @@ -197,10 +190,8 @@ export class ViewController { * @returns {TODO} TODO */ navbarBgRef() { - let navbarView = this.navbarView(); - if (navbarView) { - return navbarView.getNativeElement().querySelector('.toolbar-background'); - } + let navbar = this.getNavbar(); + return navbar && navbar.getNativeElement().querySelector('.toolbar-background'); } @@ -231,10 +222,8 @@ export class ViewController { * will fire, whether it was the first load or loaded from the cache. */ didEnter() { - let navbarView = this.navbarView(); - if (navbarView) { - navbarView.didEnter(); - } + let navbar = this.getNavbar(); + navbar && navbar.didEnter(); this.instance && this.instance.onPageDidEnter && this.instance.onPageDidEnter(); } diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index af5d190202..c606c14e64 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -92,14 +92,14 @@ export class Tab extends NavController { super(tabs, app, config, elementRef, compiler, loader, viewManager, zone); this.tabs = tabs; - let viewCtrl = this.viewCtrl = new ViewController(tabs.Host); + let viewCtrl = this.viewCtrl = new ViewController(tabs); viewCtrl.setInstance(this); - viewCtrl.viewElementRef(elementRef); + viewCtrl.setContentRef(elementRef); this._initTab = tabs.addTab(this); - this.navbarView = viewCtrl.navbarView = () => { + this.getNavbar = viewCtrl.getNavbar = () => { let activeView = this.getActive(); - return activeView && activeView.navbarView(); + return activeView && activeView.getNavbar(); }; viewCtrl.enableBack = () => { @@ -164,7 +164,7 @@ export class Tab extends NavController { viewCtrl.setInstance(componentRef.instance); // remember the ElementRef to the content that was just created - viewCtrl.viewElementRef(componentRef.location); + viewCtrl.setContentRef(componentRef.location); // get the NavController's container for navbars, which is // the place this NavController will add each ViewController's navbar diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 8fd1734f43..6a569613a0 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -118,10 +118,17 @@ export class Tabs extends NavController { // special overrides for the Tabs ViewController // the Tabs ViewController does not have it's own navbar // so find the navbar it should use within it's active Tab - viewCtrl.navbarView = () => { + viewCtrl.getNavbar = () => { let activeTab = this.getActive(); if (activeTab && activeTab.instance) { - return activeTab.instance.navbarView(); + return activeTab.instance.getNavbar(); + } + }; + + viewCtrl.contentRef = () => { + let activeTab = this.getActive(); + if (activeTab && activeTab.instance) { + return activeTab.instance.viewCtrl.contentRef(); } }; diff --git a/ionic/components/tabs/test/advanced/index.ts b/ionic/components/tabs/test/advanced/index.ts index 58ccc9eb9c..67a939d833 100644 --- a/ionic/components/tabs/test/advanced/index.ts +++ b/ionic/components/tabs/test/advanced/index.ts @@ -64,7 +64,7 @@ class Tab1Page1 { @Page({ template: '' + - '' + + '' + 'Tabs 1 Page 2' + '' + '' + diff --git a/ionic/transitions/ios-transition.ts b/ionic/transitions/ios-transition.ts index 87bc8b3f13..5c5e2591d1 100644 --- a/ionic/transitions/ios-transition.ts +++ b/ionic/transitions/ios-transition.ts @@ -1,7 +1,6 @@ -import {Transition} from './transition'; +import {Transition, ViewTransition} from './transition'; import {Animation} from '../animations/animation'; - const DURATION = 550; const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; @@ -15,97 +14,74 @@ const OFF_OPACITY = 0.8; class IOSTransition extends Transition { - constructor(nav, opts) { - super(nav, opts); + constructor(navCtrl, opts) { + super(navCtrl, opts, IOSEnteringTransition, IOSLeavingTransition); - // global duration and easing for all child animations this.duration(DURATION); this.easing(EASING); + } - // entering item moves to center - this.enteringContent +} + +class IOSEnteringTransition extends ViewTransition { + + constructor(navCtrl, viewCtrl, opts) { + super(navCtrl, viewCtrl, opts); + + this.content .to(TRANSLATEX, CENTER) .to(OPACITY, 1) - .before.setStyles({ zIndex: this.enteringZ }); + .before.setStyles({ zIndex: viewCtrl.index }); - this.enteringTitle + this.navbar.before.addClass('show-navbar'); + + this.title .fadeIn() .to(TRANSLATEX, CENTER); - this.enteringNavbarBg + this.navbarBg .to(TRANSLATEX, CENTER); - // leaving view moves off screen - this.leavingContent - .from(TRANSLATEX, CENTER) - .from(OPACITY, 1) - .before.setStyles({ zIndex: this.leavingZ }); + this.navbarItems + .fadeIn(); - this.leavingTitle - .from(TRANSLATEX, CENTER) - .from(OPACITY, 1); - - this.leavingNavbarBg - .from(TRANSLATEX, CENTER); + if (viewCtrl.enableBack()) { + this.backButton + .before.addClass('show-back-button') + .fadeIn(); + } // set properties depending on direction if (opts.direction === 'back') { // back direction - this.enteringContent + this.content .from(TRANSLATEX, OFF_LEFT) .from(OPACITY, OFF_OPACITY) .to(OPACITY, 1); - this.enteringTitle + this.title .from(TRANSLATEX, OFF_LEFT); - this.enteringNavbarBg + this.navbarBg .from(TRANSLATEX, OFF_LEFT); - this.leavingContent - .to(TRANSLATEX, '100%') - .to(OPACITY, 1); - - this.leavingTitle - .to(TRANSLATEX, '100%') - .to(OPACITY, 0); - - this.leavingNavbarBg - .to(TRANSLATEX, '100%'); - - if (this.leaving && this.leaving.enableBack() && this.viewWidth() > 200) { - let leavingBackButtonText = new Animation(this.leaving.backBtnTextRef()); - leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px'); - this.leavingNavbar.add(leavingBackButtonText); - } - } else { // forward direction - this.enteringContent + this.content .from(TRANSLATEX, '99.5%') .from(OPACITY, 1); - this.enteringTitle + this.title .from(TRANSLATEX, '99.5%'); - this.enteringNavbarBg - .from(TRANSLATEX, '99.5%'); + this.navbarBg + .from(TRANSLATEX, '99.5%') + .fadeIn(); - this.leavingContent - .to(TRANSLATEX, OFF_LEFT) - .to(OPACITY, OFF_OPACITY); - - this.leavingTitle - .to(TRANSLATEX, OFF_LEFT) - .to(OPACITY, 0); - - this.leavingNavbarBg - .to(TRANSLATEX, OFF_LEFT); - - if (this.entering.enableBack() && this.viewWidth() > 200) { - let enteringBackButtonText = new Animation(this.entering.backBtnTextRef()); - enteringBackButtonText.fromTo(TRANSLATEX, (this.viewWidth() / 2) + 'px', CENTER); - this.enteringNavbar.add(enteringBackButtonText); + if (viewCtrl.enableBack()) { + let backBtnText = new Animation(viewCtrl.backBtnTextRef()); + backBtnText.fromTo(TRANSLATEX, (300) + 'px', CENTER); + this.navbar.add(backBtnText); } } @@ -113,4 +89,72 @@ class IOSTransition extends Transition { } +class IOSLeavingTransition extends ViewTransition { + + constructor(navCtrl, viewCtrl, opts) { + super(navCtrl, viewCtrl, opts); + + // leaving viewCtrl moves off screen + this.content + .from(TRANSLATEX, CENTER) + .from(OPACITY, 1) + .before.setStyles({ zIndex: viewCtrl.index }) + .after.removeClass('show-view'); + + this.title + .from(TRANSLATEX, CENTER) + .from(OPACITY, 1); + + this.navbarBg + .from(TRANSLATEX, CENTER); + + this.navbarItems + .fadeOut(); + + this.backButton + .after.removeClass('show-back-button') + .fadeOut(); + + this.navbar.after.removeClass('show-navbar'); + + // set properties depending on direction + if (opts.direction === 'back') { + + // back direction + this.content + .to(TRANSLATEX, '100%') + .to(OPACITY, 1); + + this.title + .to(TRANSLATEX, '100%') + .to(OPACITY, 0); + + this.navbarBg + .to(TRANSLATEX, '100%') + .fadeOut(); + + // if (this.leaving && this.leaving.enableBack() && this.viewWidth() > 200) { + // let leavingBackButtonText = new Animation(this.leaving.backBtnTextRef()); + // leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px'); + // this.leavingNavbar.add(leavingBackButtonText); + // } + + } else { + // forward direction + this.content + .to(TRANSLATEX, OFF_LEFT) + .to(OPACITY, OFF_OPACITY); + + this.title + .to(TRANSLATEX, OFF_LEFT) + .to(OPACITY, 0); + + this.navbarBg + .to(TRANSLATEX, OFF_LEFT); + } + + } + +} + Transition.register('ios', IOSTransition); diff --git a/ionic/transitions/md-transition.ts b/ionic/transitions/md-transition.ts index 0c57769797..e0c4fa90a8 100644 --- a/ionic/transitions/md-transition.ts +++ b/ionic/transitions/md-transition.ts @@ -1,70 +1,68 @@ -import {Transition} from './transition'; +import {Transition, ViewTransition} from './transition'; import {Animation} from '../animations/animation'; -const TRANSLATEY = 'translateY'; +const TRANSLATE_Y = 'translateY'; const OFF_BOTTOM = '40px'; const CENTER = '0px' -class MaterialTransition extends Transition { +class MDTransition extends Transition { - constructor(nav, opts) { + constructor(navCtrl, opts) { opts.renderDelay = 160; - super(nav, opts); + super(navCtrl, opts, MDEnteringTransition, MDLeavingTransition); + } + +} + +class MDEnteringTransition extends ViewTransition { + + constructor(navCtrl, viewCtrl, opts) { + super(navCtrl, viewCtrl, opts); // entering item moves in bottom to center - this.enteringContent - .to(TRANSLATEY, CENTER) - .before.setStyles({ zIndex: this.enteringZ }); + this.content + .to(TRANSLATE_Y, CENTER) + .before.setStyles({ zIndex: viewCtrl.index }); // entering item moves in bottom to center - this.enteringNavbar - .to(TRANSLATEY, CENTER) - .before.setStyles({ zIndex: this.enteringZ + 10 }); + this.navbar + .to(TRANSLATE_Y, CENTER) + .fadeIn() + .before.addClass('show-navbar') + .before.setStyles({ zIndex: viewCtrl.index + 10 }); - // leaving view stays put - this.leavingContent - .before.setStyles({ zIndex: this.leavingZ }); - - this.leavingNavbar - .before.setStyles({ zIndex: this.leavingZ + 10 }); + if (viewCtrl.enableBack()) { + this.backButton.before.addClass('show-back-button'); + } // set properties depending on direction if (opts.direction === 'back') { this.duration(200).easing('cubic-bezier(0.47,0,0.745,0.715)'); // back direction - this.enteringContent - .from(TRANSLATEY, CENTER); + this.content + .from(TRANSLATE_Y, CENTER); - this.enteringNavbar - .from(TRANSLATEY, CENTER); - - // leaving view goes center to bottom - this.leavingContent - .fromTo(TRANSLATEY, CENTER, OFF_BOTTOM) - .fadeOut(); - - this.leavingNavbar - .fromTo(TRANSLATEY, CENTER, OFF_BOTTOM) - .fadeOut(); + this.navbar + .from(TRANSLATE_Y, CENTER); } else { // forward direction this.duration(280).easing('cubic-bezier(0.36,0.66,0.04,1)'); - this.enteringContent - .from(TRANSLATEY, OFF_BOTTOM) + this.content + .from(TRANSLATE_Y, OFF_BOTTOM) .fadeIn(); - this.enteringNavbar - .from(TRANSLATEY, OFF_BOTTOM) + this.navbar + .from(TRANSLATE_Y, OFF_BOTTOM) .fadeIn(); } - let viewLength = nav.length(); - if (nav.tabs && (viewLength === 1 || viewLength === 2)) { - let tabBarEle = nav.tabs.elementRef.nativeElement.querySelector('ion-tab-bar-section'); + 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 && opts.direction == 'back') { @@ -83,4 +81,54 @@ class MaterialTransition extends Transition { } -Transition.register('md', MaterialTransition); +class MDLeavingTransition extends ViewTransition { + + constructor(navCtrl, viewCtrl, opts) { + super(navCtrl, viewCtrl, opts); + + // leaving viewCtrl stays put + this.content + .before.setStyles({ zIndex: viewCtrl.index }) + .after.removeClass('show-view'); + + this.navbar + .before.setStyles({ zIndex: viewCtrl.index + 10 }) + .after.removeClass('show-navbar') + .fadeOut(); + + // set properties depending on direction + if (opts.direction === 'back') { + this.duration(200).easing('cubic-bezier(0.47,0,0.745,0.715)'); + + // leaving viewCtrl goes center to bottom + this.content + .fromTo(TRANSLATE_Y, CENTER, OFF_BOTTOM) + .fadeOut(); + + this.navbar + .fromTo(TRANSLATE_Y, CENTER, OFF_BOTTOM) + .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 && opts.direction == 'back') { + tabBar.fromTo('height', '0px', '69px'); + tabBar.fadeIn(); + + } else if (viewLength === 2 && opts.direction == 'forward') { + tabBar.fromTo('height', '69px', '0px'); + tabBar.fadeOut(); + } + + this.add(tabBar); + } + + } + +} + +Transition.register('md', MDTransition); diff --git a/ionic/transitions/transition.ts b/ionic/transitions/transition.ts index b8e8c32a54..c99ce3f338 100644 --- a/ionic/transitions/transition.ts +++ b/ionic/transitions/transition.ts @@ -5,103 +5,69 @@ const SHOW_NAVBAR_CSS = 'show-navbar'; const SHOW_VIEW_CSS = 'show-view'; const SHOW_BACK_BUTTON = 'show-back-button'; -let TransitionRegistry = {}; - export class Transition extends Animation { - constructor(nav, opts) { + constructor(navCtrl, opts, EnteringTransition, LeavingTransition) { super(null, opts); - // get the entering and leaving items - let entering = this.entering = nav.getStagedEnteringView(); - let leaving = this.leaving = nav.getStagedLeavingView(); - - this.enteringZ = entering.index; - this.leavingZ = (leaving && leaving.index) || 0; - - // create animation for the entering view's content area - this.enteringContent = new Animation(entering.viewElementRef()); - this.enteringContent.before.addClass(SHOW_VIEW_CSS); - this.add(this.enteringContent); - - let enteringNavbar = this.enteringNavbar = new Animation(entering.navbarRef()); - this.enteringBackButton = new Animation(entering.backBtnRef()); - this.enteringTitle = new Animation(entering.titleRef()); - this.enteringNavbarItems = new Animation(entering.navbarItemRefs()); - this.enteringNavbarBg = new Animation(entering.navbarBgRef()); - - if (opts.navbar !== false) { - - enteringNavbar.before.addClass(SHOW_NAVBAR_CSS); - - if (entering.enableBack()) { - // only animate in the back button if the entering view has it enabled - this.enteringBackButton - .before.addClass(SHOW_BACK_BUTTON) - .fadeIn(); - enteringNavbar.add(this.enteringBackButton); - } - - enteringNavbar - .add(this.enteringTitle) - .add(this.enteringNavbarItems.fadeIn()) - .add(this.enteringNavbarBg); - - this.add(enteringNavbar); + let enteringView = navCtrl.getStagedEnteringView(); + if (enteringView) { + this.add( new EnteringTransition(navCtrl, enteringView, opts) ); } - this.leavingContent = new Animation(leaving && leaving.viewElementRef()); - let leavingNavbar = this.leavingNavbar = new Animation(leaving && leaving.navbarRef()); - this.leavingBackButton = new Animation(leaving && leaving.backBtnRef()); - this.leavingTitle = new Animation(leaving && leaving.titleRef()); - this.leavingNavbarItems = new Animation(leaving && leaving.navbarItemRefs()); - this.leavingNavbarBg = new Animation(leaving && leaving.navbarBgRef()); - - if (leaving) { - // setup the leaving item if one exists (initial viewing wouldn't have a leaving item) - this.leavingContent.after.removeClass(SHOW_VIEW_CSS); - - leavingNavbar.after.removeClass(SHOW_NAVBAR_CSS); - - this.leavingBackButton - .after.removeClass(SHOW_BACK_BUTTON) - .fadeOut(); - - leavingNavbar - .add(this.leavingBackButton) - .add(this.leavingTitle) - .add(this.leavingNavbarItems.fadeOut()) - .add(this.leavingNavbarBg); - - this.add(this.leavingContent, leavingNavbar); + let leavingView = navCtrl.getStagedLeavingView(); + if (leavingView) { + this.add( new LeavingTransition(navCtrl, leavingView, opts) ); } - - } - - viewWidth() { - // TODO: MAKE MORE BETTER - return this._w || (this._w = this.leaving && this.leaving.viewElementRef().nativeElement.offsetWidth); } /* STATIC CLASSES */ - static create(nav, opts = {}) { + static create(navCtrl, opts = {}) { const name = opts.animation || 'ios'; - let TransitionClass = TransitionRegistry[name]; + let TransitionClass = transitionRegistry[name]; if (!TransitionClass) { - // transition wasn't found, default to a 'none' transition - // which doesn't animate anything, just shows and hides - TransitionClass = Transition; + TransitionClass = transitionRegistry.ios; } - return new TransitionClass(nav, opts); + return new TransitionClass(navCtrl, opts); } static register(name, TransitionClass) { - TransitionRegistry[name] = TransitionClass; + transitionRegistry[name] = TransitionClass; } } + + +export class ViewTransition extends Animation { + + constructor(navCtrl, viewCtrl, opts) { + super(null, opts); + + // create animation for the entering view's content area + this.content = new Animation(viewCtrl.contentRef()); + this.content.before.addClass(SHOW_VIEW_CSS); + this.add(this.content); + + this.navbar = new Animation(viewCtrl.navbarRef()); + this.backButton = new Animation(viewCtrl.backBtnRef()); + this.title = new Animation(viewCtrl.titleRef()); + this.navbarItems = new Animation(viewCtrl.navbarItemRefs()); + this.navbarBg = new Animation(viewCtrl.navbarBgRef()); + + this.navbar + .add(this.backButton) + .add(this.title) + .add(this.navbarItems) + .add(this.navbarBg); + + this.add(this.navbar); + } + +} + +let transitionRegistry = {};