From 03086ed2288284ebacb4eb075e65e622a9947dfa Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 16 Sep 2014 22:58:20 -0500 Subject: [PATCH] fix(nav): prevent flickers between views MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit By default the scroll bar is being created for each view, then immediately it adds the .scroll-bar-fade-out class. On every transition you sometimes saw the scroll bar appear then fade away quickly. Sure that was annoying and has been fixed to prevent that, but the real issue is that on every view transition, the scroll bar’s opacity transition fired off a transitionend event, which bubbled up to the view and messed with Angular’s $animate. If timed out correctly, at the time the scroll bar’s transitionend event bubbled up, and an element was actively leaving the view, it would confuse $animate and cause the leave animation to abruptly end, which caused an ugly flicker. --- js/views/scrollView.js | 2 +- scss/_scaffolding.scss | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/js/views/scrollView.js b/js/views/scrollView.js index 5bd28386938..eb59c0f3cb2 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -918,7 +918,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ var bar = document.createElement('div'), indicator = document.createElement('div'); - indicator.className = 'scroll-bar-indicator'; + indicator.className = 'scroll-bar-indicator scroll-bar-fade-out'; if(direction == 'h') { bar.className = 'scroll-bar scroll-bar-h'; diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss index 6a0a35ac650..7182fe925a9 100644 --- a/scss/_scaffolding.scss +++ b/scss/_scaffolding.scss @@ -137,10 +137,9 @@ body.grade-c { border-radius: 4px; background: rgba(0,0,0,0.3); opacity: 1; - + @include transition(opacity .3s linear); &.scroll-bar-fade-out { - @include transition(opacity 0.3s linear); opacity: 0; } }