From 7b7c963ab2cf480a180855e3c1ab35a608bdb043 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 28 May 2015 16:16:33 -0500 Subject: [PATCH] fps improvements --- ionic/components/app/structure.scss | 18 +++++++++++++++--- ionic/components/nav-bar/nav-bar.scss | 6 ------ ionic/components/nav/nav-base.js | 22 ++++++++++++++++++++-- ionic/transitions/ios-transition.js | 14 ++++++-------- ionic/transitions/transition.js | 10 ++-------- 5 files changed, 43 insertions(+), 27 deletions(-) diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index e6b1336b15..af24c56770 100644 --- a/ionic/components/app/structure.scss +++ b/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; + } + +} diff --git a/ionic/components/nav-bar/nav-bar.scss b/ionic/components/nav-bar/nav-bar.scss index eb09323910..acecad5bd2 100644 --- a/ionic/components/nav-bar/nav-bar.scss +++ b/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); -} diff --git a/ionic/components/nav/nav-base.js b/ionic/components/nav/nav-base.js index 09429715c3..73c3f82155 100644 --- a/ionic/components/nav/nav-base.js +++ b/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); } diff --git a/ionic/transitions/ios-transition.js b/ionic/transitions/ios-transition.js index 3ca54fa640..74fe4de58c 100644 --- a/ionic/transitions/ios-transition.js +++ b/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); diff --git a/ionic/transitions/transition.js b/ionic/transitions/transition.js index c1a50e950b..0e0b35007d 100644 --- a/ionic/transitions/transition.js +++ b/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); } }