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
Show 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 @@
<script src="single.js"></script>
</head>
<body>
<div id="most-visited">
<div id="mv-tiles"></div>
</div>
<div id="most-visited"></div>
</body>
</html>
chrome/browser/resources/local_ntp/most_visited_single.js
View file @ 7c098a49
......@@ -258,9 +258,12 @@ var showTiles = function() {
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');
if (old) {
fadeIn = true;
// Mark old tile DIV for removal after the transition animation is done.
old.removeAttribute('id');
old.classList.add('mv-tiles-old');
old.style.opacity = 0.0;
......@@ -274,11 +277,12 @@ var showTiles = function() {
// Add new tileset.
cur.id = 'mv-tiles';
parent.appendChild(cur);
// We want the CSS transition to trigger, so need to add to the DOM before
// setting the style.
setTimeout(function() {
// getComputedStyle causes the initial style (opacity 0) to be applied, so
// that when we then set it to 1, that triggers the CSS transition.
if (fadeIn) {
window.getComputedStyle(cur).opacity;
}
cur.style.opacity = 1.0;
}, 0);
// Make sure the tiles variable contain the next tileset we may use.
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