transition improvements

ionic/components/app/util.scss

@@ -85,7 +85,9 @@ $content-padding:    10px !default;
   opacity: 0;
   z-index: $z-index-click-block;
   transform: translate3d(-9999px, 0px, 0px);
-  overflow: hidden;
+
+  //background: red;
+  //opacity: .3;
 }
 
 .click-block-active {

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

@@ -72,10 +72,8 @@ export class Navbar {
   alignTitle() {
     // called after the navbar/title has had a moment to
     // finish rendering in their correct locations
-
     const navbarEle = this._ele;
-    const innerTitleEle = this._innerTtEle || (this._innerTtEle = navbarEle.querySelector('.navbar-inner-title'));
-    const titleEle = this._ttEle || (this._ttEle = innerTitleEle.querySelector('ion-title'));
+    const titleEle = this._ttEle || (this._ttEle = navbarEle.querySelector('ion-title'));
 
     // don't bother if there's no title element
     if (!titleEle) return;
@@ -87,9 +85,8 @@ export class Navbar {
     if (titleStyle.textAlign !== 'center') return;
 
     // get all the dimensions
-    const titleOffsetWidth = titleEle.offsetWidth;
     const titleOffsetLeft = titleEle.offsetLeft;
-    const titleOffsetRight = navbarEle.offsetWidth - (titleOffsetLeft + titleOffsetWidth);
+    const titleOffsetRight = navbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth);
 
     let marginLeft = 0;
     let marginRight = 0;
@@ -104,6 +101,7 @@ export class Navbar {
 
     if ((marginLeft || marginRight) && margin !== this._ttMargin) {
       // only do an update if it has to
+      const innerTitleEle = this._innerTtEle || (this._innerTtEle = navbarEle.querySelector('.navbar-inner-title'));
       innerTitleEle.style.margin = this._ttMargin = margin;
     }
   }

ionic/components/nav-bar/nav-bar.scss

@@ -22,7 +22,7 @@ ion-navbar {
   justify-content: space-between;
   order: $flex-order-toolbar-top;
 
-  transform: translate3d(0px, -9999px, 0px);
+  transform: translate3d(100%, 0px, 0px);
   &.show-navbar {
     transform: translate3d(0px, 0px, 0px);
   }

ionic/components/view/view-controller.js

@@ -122,8 +122,6 @@ export class ViewController {
 
     opts.animate = (opts.animation !== 'none');
 
-    this.transitionStart(opts);
-
     // wait for the new item to complete setup
     enteringItem.stage(() => {
 
@@ -144,6 +142,13 @@ export class ViewController {
         transAnimation.duration(0);
       }
 
+      let duration = transAnimation.duration();
+      if (duration > 64) {
+        // block any clicks during the transition and provide a
+        // fallback to remove the clickblock if something goes wrong
+        ClickBlock(true, duration + 200);
+      }
+
       // start the transition
       transAnimation.play().then(() => {
 
@@ -193,9 +198,6 @@ export class ViewController {
     enteringItem.shouldCache = false;
     enteringItem.willEnter();
 
-    // start the transition
-    this.transitionStart({ animate: true });
-
     // wait for the new item to complete setup
     enteringItem.stage(() => {
 
@@ -283,13 +285,6 @@ export class ViewController {
     return false;
   }
 
-  transitionStart(opts) {
-    if (opts.animate) {
-      // block possible clicks during transition
-      ClickBlock(true, 520);
-    }
-  }
-
   transitionComplete() {
 
     this.items.forEach((item) => {