From d69877742186ecafaebd740e35838501f63d6272 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 12 Jun 2015 14:49:09 -0500 Subject: [PATCH] smooth criminal --- ionic/animations/animation.js | 10 +++--- ionic/components/app/structure.scss | 33 ------------------- ionic/components/app/z-index.scss | 1 - ionic/components/button/button.scss | 13 -------- ionic/components/nav-bar/nav-bar.scss | 22 ++++++++++--- ionic/components/nav/pane.js | 4 --- .../nav/test/basic/pages/first-page.js | 1 + ionic/components/view/view-controller.js | 8 ++--- ionic/components/view/view-item.js | 4 --- ionic/transitions/ios-transition.js | 6 ++-- ionic/transitions/transition.js | 16 ++------- scripts/e2e/ionic.template.html | 11 ++----- 12 files changed, 35 insertions(+), 94 deletions(-) diff --git a/ionic/animations/animation.js b/ionic/animations/animation.js index 948e7ffc82..a397103d48 100644 --- a/ionic/animations/animation.js +++ b/ionic/animations/animation.js @@ -1,6 +1,6 @@ import {CSS} from '../util/dom'; - +const RENDER_DELAY = 36; let AnimationRegistry = {}; export class Animation { @@ -190,12 +190,10 @@ export class Animation { }); } - if (this._duration > 36) { + if (this._duration > RENDER_DELAY) { // begin each animation when everything is rendered in their starting point // give the browser some time to render everything in place before starting - setTimeout(() => { - kickoff(); - }, 36); + setTimeout(kickoff, RENDER_DELAY); } else { // no need to render everything in there place before animating in @@ -371,7 +369,7 @@ class Animate { self.toEffect = parseEffect(toEffect); - self.shouldAnimate = (duration > 36); + self.shouldAnimate = (duration > RENDER_DELAY); if (!self.shouldAnimate) { return inlineStyle(ele, self.toEffect); diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index 8885e74303..4c09824222 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -30,8 +30,6 @@ body { -moz-user-select: none; -ms-user-select: none; user-select: none; - - -webkit-backface-visibility: hidden; } ion-app { @@ -62,8 +60,6 @@ ion-pane { display: flex; flex-direction: column; - - transform: translateZ(0px); } .nav-item { @@ -84,21 +80,6 @@ ion-pane { flex: 1; } -ion-navbar { - position: absolute; - width: 100%; - height: 100%; - min-height: 4.4rem; - order: $flex-order-toolbar-top; - - transform: translateZ(0px); - - display: none; - &.show-navbar { - display: flex; - } -} - ion-toolbar { display: flex; min-height: 4.4rem; @@ -123,17 +104,3 @@ ion-content { -webkit-overflow-scrolling: touch; will-change: scroll-position; } - - -// Hardware Acceleration -.transitioning { - - .nav-item, - ion-navbar, - .back-button, - .navbar-title, - .navbar-item { - will-change: transform, opacity; - } - -} diff --git a/ionic/components/app/z-index.scss b/ionic/components/app/z-index.scss index aebcd9e49d..48440419b5 100644 --- a/ionic/components/app/z-index.scss +++ b/ionic/components/app/z-index.scss @@ -5,7 +5,6 @@ $z-index-content: 1 !default; $z-index-swipe-handle: 5 !default; -$z-index-button: 10 !default; $z-index-toolbar-border: 20 !default; $z-index-list-border: 50 !default; $z-index-aside-overlay: 80 !default; diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index a4e30477aa..fbfcd47d14 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -25,14 +25,11 @@ $button-small-icon-size: 2.1rem !default; // -------------------------------------------------- .button { - position: relative; - display: inline-flex; flex-shrink: 0; flex-flow: row nowrap; align-items: center; justify-content: center; - z-index: $z-index-button; margin: $button-margin; line-height: 1; @@ -52,16 +49,6 @@ $button-small-icon-size: 2.1rem !default; cursor: pointer; user-select: none; - - &:after { - // used to create a larger button "hit" area - position: absolute; - top: -6px; - right: -6px; - bottom: -6px; - left: -6px; - content: ' '; - } } diff --git a/ionic/components/nav-bar/nav-bar.scss b/ionic/components/nav-bar/nav-bar.scss index 60247a8cdd..b14f66ffe9 100644 --- a/ionic/components/nav-bar/nav-bar.scss +++ b/ionic/components/nav-bar/nav-bar.scss @@ -11,9 +11,21 @@ $navbar-order: ( ion-navbar { + position: absolute; + width: 100%; + height: 100%; + min-height: 4.4rem; + + display: flex; flex-direction: row; align-items: center; justify-content: space-between; + order: $flex-order-toolbar-top; + + transform: translate3d(0px, -9999px, 0px); + &.show-navbar { + transform: translate3d(0px, 0px, 0px); + } } .navbar-inner { @@ -31,6 +43,11 @@ ion-navbar { } } +.back-button-text { + display: flex; + align-items: center; +} + .navbar-title { flex: 1; order: map-get($navbar-order, 'title'); @@ -55,11 +72,6 @@ ion-title { .navbar-item { transform: translateZ(0px); - - display: none; - &.show-navbar-item { - display: block; - } } .navbar-primary-item { diff --git a/ionic/components/nav/pane.js b/ionic/components/nav/pane.js index ede79a7e19..b8b3d53de8 100644 --- a/ionic/components/nav/pane.js +++ b/ionic/components/nav/pane.js @@ -115,10 +115,6 @@ export class Pane { return this.domElement.offsetWidth; } - isTransitioning(val) { - this.domElement.classList[val ? 'add' : 'remove']('transitioning'); - } - showPane(val) { this.domElement.classList[val ? 'add' : 'remove']('show-pane'); } diff --git a/ionic/components/nav/test/basic/pages/first-page.js b/ionic/components/nav/test/basic/pages/first-page.js index 655af564e7..c956c35b48 100644 --- a/ionic/components/nav/test/basic/pages/first-page.js +++ b/ionic/components/nav/test/basic/pages/first-page.js @@ -22,6 +22,7 @@ import {SecondPage} from './second-page'; '

First Page: {{ val }}

' + '

' + '

' + + '' + '' + '' + '', diff --git a/ionic/components/view/view-controller.js b/ionic/components/view/view-controller.js index 16eaaa18f7..0f5bc8a24f 100644 --- a/ionic/components/view/view-controller.js +++ b/ionic/components/view/view-controller.js @@ -34,8 +34,8 @@ export class ViewController { this.sbTransition = null; this.sbActive = false; - this.id = ++itemIds; - this.childIds = -1; + this.id = ++ctrlIds; + this._ids = -1; } push(ComponentClass, params = {}, opts = {}) { @@ -395,7 +395,7 @@ console.log('completeSwipeBack', completeSwipeBack) } add(item) { - item.id = this.id + '' + (++this.childIds); + item.id = this.id + '' + (++this._ids); this.items.push(item); } @@ -442,4 +442,4 @@ const CACHED_STATE = 2; const STAGED_ENTERING_STATE = 3; const STAGED_LEAVING_STATE = 4; -let itemIds = -1; +let ctrlIds = -1; diff --git a/ionic/components/view/view-item.js b/ionic/components/view/view-item.js index 3723784597..22e9928d26 100644 --- a/ionic/components/view/view-item.js +++ b/ionic/components/view/view-item.js @@ -240,7 +240,6 @@ export class ViewItem { The view is about to enter and become the active view. */ willEnter() { - this.pane && this.pane.isTransitioning(true); this.instance && this.instance.viewWillEnter && this.instance.viewWillEnter(); } @@ -249,7 +248,6 @@ export class ViewItem { will fire, whether it was the first load or loaded from the cache. */ didEnter() { - this.pane && this.pane.isTransitioning(false); this.pane && this.pane.showPane(true); this.instance && this.instance.viewDidEnter && this.instance.viewDidEnter(); } @@ -258,7 +256,6 @@ export class ViewItem { The view has is about to leave and no longer be the active view. */ willLeave() { - this.pane && this.pane.isTransitioning(true); this.instance && this.instance.viewWillLeave && this.instance.viewWillLeave(); } @@ -267,7 +264,6 @@ export class ViewItem { will fire, whether it is cached or unloaded. */ didLeave() { - this.pane && this.pane.isTransitioning(false); this.instance && this.instance.viewDidLeave && this.instance.viewDidLeave(); } diff --git a/ionic/transitions/ios-transition.js b/ionic/transitions/ios-transition.js index 5a824c9656..2472d797bd 100644 --- a/ionic/transitions/ios-transition.js +++ b/ionic/transitions/ios-transition.js @@ -2,7 +2,7 @@ import {Transition} from './transition'; import {Animation} from '../animations/animation'; -const DURATION = 1000; +const DURATION = 600; const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; const OPACITY = 'opacity'; @@ -65,11 +65,11 @@ class IOSTransition extends Transition { } else { // forward direction self.enteringView - .from(TRANSLATEX, OFF_RIGHT) + .from(TRANSLATEX, '99%') .from(OPACITY, 1); self.enteringTitle - .from(TRANSLATEX, OFF_RIGHT); + .from(TRANSLATEX, '97%'); self.leavingView .to(TRANSLATEX, OFF_LEFT) diff --git a/ionic/transitions/transition.js b/ionic/transitions/transition.js index 3dc6ec134a..e6c98e1e90 100644 --- a/ionic/transitions/transition.js +++ b/ionic/transitions/transition.js @@ -3,7 +3,6 @@ import {Animation} from '../animations/animation'; const SHOW_NAVBAR_CSS = 'show-navbar'; const SHOW_VIEW_CSS = 'show-view'; const SHOW_BACK_BUTTON = 'show-back-button'; -const SHOW_NAVBAR_ITEM = 'show-navbar-item'; let TransitionRegistry = {}; @@ -24,7 +23,6 @@ export class Transition extends Animation { self.enteringView.before.addClass(SHOW_VIEW_CSS); self.add(self.enteringView); - // create animation for the entering item's "ion-navbar" element if (opts.navbar !== false) { let enteringNavbar = self.enteringNavbar = new Animation(enteringItem.navbarElement()); enteringNavbar.before.addClass(SHOW_NAVBAR_CSS); @@ -34,28 +32,23 @@ export class Transition extends Animation { let enteringBackButton = self.enteringBackButton = new Animation(enteringItem.backButtonElement()); enteringBackButton .before.addClass(SHOW_BACK_BUTTON) - .fadeIn(); + .fromTo('opacity', 0.02, 1) enteringNavbar.add(enteringBackButton); } - // create animation for the entering item's "ion-title" element self.enteringTitle = new Animation(enteringItem.titleElement()); enteringNavbar.add(self.enteringTitle); self.add(enteringNavbar); self.enteringNavbarItems = new Animation(enteringItem.navbarItemElements()) - self.enteringNavbarItems - .before.addClass(SHOW_NAVBAR_ITEM) - .fadeIn(); + self.enteringNavbarItems.fromTo('opacity', 0.02, 1) enteringNavbar.add(self.enteringNavbarItems); } if (leavingItem) { - // create animation for the entering item's "ion-view" element self.leavingView = new Animation(leavingItem.viewElement()); self.leavingView.after.removeClass(SHOW_VIEW_CSS); - // create animation for the entering item's "ion-navbar" element let leavingNavbar = self.leavingNavbar = new Animation(leavingItem.navbarElement()); leavingNavbar.after.removeClass(SHOW_NAVBAR_CSS); @@ -65,14 +58,11 @@ export class Transition extends Animation { .fadeOut(); leavingNavbar.add(leavingBackButton); - // create animation for the leaving item's "ion-title" element self.leavingTitle = new Animation(leavingItem.titleElement()); leavingNavbar.add(self.leavingTitle); self.leavingNavbarItems = new Animation(leavingItem.navbarItemElements()) - self.leavingNavbarItems - .after.removeClass(SHOW_NAVBAR_ITEM) - .fadeOut(); + self.leavingNavbarItems.fadeOut(); leavingNavbar.add(self.leavingNavbarItems); self.add(self.leavingView, leavingNavbar); diff --git a/scripts/e2e/ionic.template.html b/scripts/e2e/ionic.template.html index 0246746043..ead7d6449d 100644 --- a/scripts/e2e/ionic.template.html +++ b/scripts/e2e/ionic.template.html @@ -2,16 +2,11 @@ - + + + -