fps improvements

ionic/components/app/structure.scss

@@ -60,7 +60,6 @@ ion-navbar {
     display: flex;
   }
 
-  transform: translateZ(0);
 }
 
 ion-view,
@@ -80,7 +79,6 @@ ion-view,
     display: flex;
   }
 
-  transform: translateZ(0);
 }
 
 ion-toolbar {
@@ -97,7 +95,6 @@ ion-content {
 }
 
 .scroll-content {
-  // extra div added by ion-content directive to allow for overflow scrolling
   position: absolute;
   top: 0;
   right: 0;
@@ -105,6 +102,7 @@ ion-content {
   left: 0;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
+  will-change: scroll-position;
 }
 
 $swipe-handle-width:               20px !default;
@@ -118,3 +116,17 @@ swipe-handle {
   height: 100%;
   z-index: $z-index-swipe-handle;
 }
+
+
+// Hardware Acceleration
+.transitioning {
+
+  ion-view,
+  .ion-view,
+  ion-navbar,
+  .back-button,
+  ion-title {
+    will-change: transform, opacity;
+  }
+
+}

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

@@ -51,8 +51,6 @@ ion-title {
   // used to notify JS when the title has been rendered
   animation-duration: 1ms;
   animation-name: nodeInserted;
-
-  transform: translateZ(0);
 }
 
 .navbar-inner-title {
@@ -70,7 +68,3 @@ ion-title {
 .navbar-title-hide {
   opacity: 0;
 }
-
-.back-button {
-  transform: translateZ(0);
-}

ionic/components/nav/nav-base.js

@@ -102,8 +102,12 @@ export class NavBase {
     let resolve;
     let promise = new Promise(res => { resolve = res; });
 
+    opts.isAnimated = opts.animation !== 'none';
+
     // block possible clicks during transition
-    ClickBlock(opts.animation !== 'none', 520);
+    ClickBlock(opts.isAnimated, 520);
+
+    this.transitionStart(opts);
 
     // wait for the new item to complete setup
     enteringItem.stage().then(() => {
@@ -171,10 +175,12 @@ export class NavBase {
     let enteringItem = this.getPrevious(leavingItem);
     enteringItem.shouldDestroy = false;
 
-    // start the transition
     // block possible clicks during transition
     ClickBlock(true);
 
+    // start the transition
+    this.transitionStart({ isAnimated: true });
+
     // wait for the new item to complete setup
     enteringItem.stage().then(() => {
 
@@ -257,6 +263,12 @@ export class NavBase {
     }
   }
 
+  transitionStart(opts) {
+    if (opts.isAnimated) {
+      this.getNavElement().classList.add('transitioning');
+    }
+  }
+
   transitionComplete() {
 
     this.items.forEach((item) => {
@@ -271,6 +283,8 @@ export class NavBase {
       }
     });
 
+    this.getNavElement().classList.remove('transitioning');
+
     // allow clicks again
     ClickBlock(false);
   }
@@ -323,6 +337,10 @@ export class NavBase {
     return null;
   }
 
+  getNavElement() {
+    return this.domElement;
+  }
+
   remove(itemOrIndex) {
     util.array.remove(this.items, itemOrIndex);
   }

ionic/transitions/ios-transition.js

@@ -24,8 +24,7 @@ class IOSTransition extends Transition {
     this.easing(EASING);
 
     // entering item moves to center
-    // before starting, set enteringItem to display: block
-    this.enteringContent
+    this.enteringView
       .to(TRANSLATEX, CENTER)
       .to(OPACITY, 1);
 
@@ -44,8 +43,7 @@ class IOSTransition extends Transition {
     }
 
     // leaving view moves off screen
-    // when completed, set leaving to display: none
-    this.leavingContent
+    this.leavingView
       .from(TRANSLATEX, CENTER)
       .from(OPACITY, 1);
 
@@ -62,7 +60,7 @@ class IOSTransition extends Transition {
     // set properties depending on direction
     if (opts.direction === 'back') {
       // back direction
-      this.enteringContent
+      this.enteringView
         .from(TRANSLATEX, OFF_LEFT)
         .from(OPACITY, OFF_OPACITY)
         .to(OPACITY, 1);
@@ -70,7 +68,7 @@ class IOSTransition extends Transition {
       this.enteringTitle
         .from(TRANSLATEX, OFF_LEFT);
 
-      this.leavingContent
+      this.leavingView
         .to(TRANSLATEX, OFF_RIGHT)
         .to(OPACITY, 1);
 
@@ -80,14 +78,14 @@ class IOSTransition extends Transition {
 
     } else {
       // forward direction
-      this.enteringContent
+      this.enteringView
         .from(TRANSLATEX, OFF_RIGHT)
         .from(OPACITY, 1);
 
       this.enteringTitle
         .from(TRANSLATEX, OFF_RIGHT);
 
-      this.leavingContent
+      this.leavingView
         .to(TRANSLATEX, OFF_LEFT)
         .to(OPACITY, OFF_OPACITY);
 

ionic/transitions/transition.js

@@ -24,13 +24,10 @@ export class Transition extends Animation {
     this.enteringNavbar = new Animation(enteringItem.navbarElement());
     this.enteringNavbar.beforePlay.addClass(SHOW_NAVBAR_CSS);
 
-    // create animation for the entering item's "ion-content" element
-    this.enteringContent = new Animation(enteringItem.contentElement());
-
     // create animation for the entering item's "ion-title" element
     this.enteringTitle = new Animation(enteringItem.titleElement());
 
-    this.addAnimation(this.enteringView, this.enteringNavbar, this.enteringContent, this.enteringTitle);
+    this.addAnimation(this.enteringView, this.enteringNavbar, this.enteringTitle);
 
     if (leavingItem) {
       // create animation for the entering item's "ion-view" element
@@ -41,13 +38,10 @@ export class Transition extends Animation {
       this.leavingNavbar = new Animation(leavingItem.navbarElement());
       this.leavingNavbar.afterFinish.removeClass(SHOW_NAVBAR_CSS);
 
-      // create animation for the leaving item's "ion-content" element
-      this.leavingContent = new Animation(leavingItem.contentElement());
-
       // create animation for the leaving item's "ion-title" element
       this.leavingTitle = new Animation(leavingItem.titleElement());
 
-      this.addAnimation(this.leavingView, this.leavingNavbar, this.leavingContent, this.leavingTitle);
+      this.addAnimation(this.leavingView, this.leavingNavbar, this.leavingTitle);
     }
 
   }