create enteringItem.postRender()

ionic/animations/animation.js

@@ -179,8 +179,6 @@ export class Animation {
       let i, l;
       let promises = [];
 
-      self._onPlay();
-
       for (i = 0, l = children.length; i < l; i++) {
         promises.push( children[i].play() );
       }
@@ -203,6 +201,9 @@ export class Animation {
       let promise = new Promise(res => { resolve = res; });
 
       function kickoff() {
+        // synchronously call all onPlay()'s before play()
+        self._onPlay();
+
         beginPlay().then(() => {
           for (let i = 0, l = children.length; i < l; i++) {
             children[i]._onFinish();
@@ -232,8 +233,8 @@ export class Animation {
   }
 
   stage() {
+    // before the RENDER_DELAY
     // before the animations have started
-    // add the correct "from" effects and classes
     const self = this;
 
     if (!self._isStaged) {
@@ -280,9 +281,12 @@ export class Animation {
   }
 
   _onPlay() {
-    // after the render delay has happened
-    // before the animations start
-
+    // after the RENDER_DELAY
+    // before the animations have started
+    for (let i = 0, l = this._children.length; i < l; i++) {
+      this._children[i]._onPlay();
+    }
+    this.onPlay && this.onPlay();
   }
 
   _onFinish() {

ionic/components/nav-bar/nav-bar.js

@@ -39,10 +39,39 @@ import * as dom from '../../util/dom';
 })
 export class Navbar {
   constructor(item: ViewItem, elementRef: ElementRef) {
-    this.element = elementRef.domElement;
-    this.itemElements = [];
+    this._ele = elementRef.domElement;
+    this._itmEles = [];
     item.navbarView(this);
   }
+
+  element() {
+    return this._ele;
+  }
+
+  backButtonElement() {
+    if (arguments.length) {
+      this._bbEle = arguments[0];
+    }
+    return this._bbEle;
+  }
+
+  titleElement() {
+    if (arguments.length) {
+      this._tlEle = arguments[0];
+    }
+    return this._tlEle;
+  }
+
+  itemElements() {
+    if (arguments.length) {
+      this._itmEles.push(arguments[0]);
+    }
+    return this._itmEles;
+  }
+
+  alignTitle() {
+    console.log('alignTitle')
+  }
 }
 
 @Directive({
@@ -54,7 +83,7 @@ export class Navbar {
 class BackButton {
   constructor(@Parent() navbar: Navbar, item: ViewItem, elementRef: ElementRef) {
     this.item = item;
-    navbar.backButtonElement = elementRef.domElement;
+    navbar.backButtonElement(elementRef.domElement);
   }
 
   goBack(ev) {
@@ -69,7 +98,7 @@ class BackButton {
 })
 export class Title {
   constructor(@Parent() navbar: Navbar, elementRef: ElementRef) {
-    navbar.titleElement = elementRef.domElement;
+    navbar.titleElement(elementRef.domElement);
   }
 }
 
@@ -78,7 +107,7 @@ export class Title {
 })
 export class NavbarItem {
   constructor(@Parent() navbar: Navbar, elementRef: ElementRef) {
-    navbar.itemElements.push(elementRef.domElement);
+    navbar.itemElements(elementRef.domElement);
   }
 }
 

ionic/components/tabs/tab.js

@@ -54,7 +54,7 @@ export class Tab extends ViewController {
 
     let item = this.item = new ViewItem(tabs.parent);
     item.setInstance(this);
-    item.setViewElement(elementRef.domElement);
+    item.viewElement(elementRef.domElement);
     tabs.addTab(this);
 
     this.navbarView = item.navbarView = () => {

ionic/components/tabs/tabs.js

@@ -74,14 +74,14 @@ export class Tabs extends ViewController {
       };
 
       // a Tabs ViewItem should not have a back button
-      // enableBack back button should be determined by the
-      // the active ViewItem with a navbar
+      // enableBack back button will later be determined
+      // by the active ViewItem that has a navbar
       viewItem.enableBack = () => {
         return false;
       };
-    }
 
-    this.childNavbar(true);
+      this.childNavbar(true);
+    }
 
     Config(this, {
       'tabBarPlacement': {

ionic/components/view/view-item.js

@@ -60,7 +60,7 @@ export class ViewItem {
 
         // get the component's instance, and set it to the this ViewItem
         this.setInstance( viewCtrl.loader._viewManager.getComponent(new ElementRef(hostViewRef, 0)) );
-        this.setViewElement( hostViewRef._view.render._view.rootNodes[0] );
+        this.viewElement( hostViewRef._view.render._view.rootNodes[0] );
 
         // remember how to dispose of this reference
         this.disposals.push(() => {
@@ -158,11 +158,6 @@ export class ViewItem {
     this.instance = instance;
   }
 
-  setViewElement(viewEle) {
-    this.viewEle = viewEle;
-    viewEle && viewEle.classList.add('nav-item');
-  }
-
   cache() {
     this.didCache();
   }
@@ -183,34 +178,55 @@ export class ViewItem {
   }
 
   viewElement() {
-    return this.viewEle;
+    if (arguments.length) {
+      this._vwEle = arguments[0];
+      this._vwEle && this._vwEle.classList.add('nav-item');
+    }
+    return this._vwEle;
   }
 
   navbarView() {
     if (arguments.length) {
       this._nbView = arguments[0];
-
-    } else if (this._nbView) {
-      return this._nbView;
     }
-
-    return {};
+    return this._nbView;
   }
 
   navbarElement() {
-    return this.navbarView().element;
+    let navbarView = this.navbarView();
+    if (navbarView) {
+      return navbarView.element();
+    }
   }
 
   titleElement() {
-    return this.navbarView().titleElement;
+    let navbarView = this.navbarView();
+    if (navbarView) {
+      return navbarView.titleElement();
+    }
   }
 
   backButtonElement() {
-    return this.navbarView().backButtonElement;
+    let navbarView = this.navbarView();
+    if (navbarView) {
+      return navbarView.backButtonElement();
+    }
   }
 
   navbarItemElements() {
-    return this.navbarView().itemElements;
+    let navbarView = this.navbarView();
+    if (navbarView) {
+      return navbarView.itemElements();
+    }
+  }
+
+  postRender() {
+    // the elements are in the DOM and the browser
+    // has rendered them in their correct locations
+    let navbarView = this.navbarView();
+    if (navbarView) {
+      navbarView.alignTitle();
+    }
   }
 
 

ionic/transitions/transition.js

@@ -19,6 +19,11 @@ export class Transition extends Animation {
     // create animation for the entering item's "ion-view" element
     this.enteringView = new Animation(enteringItem.viewElement());
     this.enteringView.before.addClass(SHOW_VIEW_CSS);
+
+    this.enteringView.onPlay = () => {
+      enteringItem.postRender();
+    };
+
     this.add(this.enteringView);
 
     if (opts.navbar !== false) {