Skip to content

GitLab

T
tangled
Commit 7c098a49 authored by treib's avatar treib Committed by Commit bot
Browse files
Options

NTP: fade-in the tiles only when they change, not when they are shown initially 

Before this CL, the fade-in transition would trigger inconsistently, maybe in 1 out of 10 cases. Now it triggers consistently, only when the tiles change, but not when the first set of tiles is shown.

BUG=645158
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2316423003
Cr-Commit-Position: refs/heads/master@{#417539}
parent f7a7635e
Hide whitespace changes
Inline Side-by-side
Showing with 11 additions and 9 deletions
chrome/browser/resources/local_ntp/most_visited_single.html
View file @ 7c098a49
...@@ -11,8 +11,6 @@ ...@@ -11,8 +11,6 @@
<script src="single.js"></script> <script src="single.js"></script>
</head> </head>
<body> <body>
<div id="most-visited"> <div id="most-visited"></div>
<div id="mv-tiles"></div>
</div>
</body> </body>
</html> </html>
chrome/browser/resources/local_ntp/most_visited_single.js
View file @ 7c098a49
...@@ -258,9 +258,12 @@ var showTiles = function() { ...@@ -258,9 +258,12 @@ var showTiles = function() {
var parent = document.querySelector('#most-visited'); var parent = document.querySelector('#most-visited');
// Mark old tile DIV for removal after the transition animation is done. // Only fade in the new tiles if there were tiles before.
var fadeIn = false;
var old = parent.querySelector('#mv-tiles'); var old = parent.querySelector('#mv-tiles');
if (old) { if (old) {
fadeIn = true;
// Mark old tile DIV for removal after the transition animation is done.
old.removeAttribute('id'); old.removeAttribute('id');
old.classList.add('mv-tiles-old'); old.classList.add('mv-tiles-old');
old.style.opacity = 0.0; old.style.opacity = 0.0;
...@@ -274,11 +277,12 @@ var showTiles = function() { ...@@ -274,11 +277,12 @@ var showTiles = function() {
// Add new tileset. // Add new tileset.
cur.id = 'mv-tiles'; cur.id = 'mv-tiles';
parent.appendChild(cur); parent.appendChild(cur);
// We want the CSS transition to trigger, so need to add to the DOM before // getComputedStyle causes the initial style (opacity 0) to be applied, so
// setting the style. // that when we then set it to 1, that triggers the CSS transition.
setTimeout(function() { if (fadeIn) {
cur.style.opacity = 1.0; window.getComputedStyle(cur).opacity;
}, 0); }
cur.style.opacity = 1.0;
// Make sure the tiles variable contain the next tileset we may use. // Make sure the tiles variable contain the next tileset we may use.
tiles = document.createElement('div'); tiles = document.createElement('div');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment