From 2e8e7ad1cc4d10d691174f0ba06c02826ce59902 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Fri, 8 Feb 2013 11:20:11 -0500
Subject: [PATCH] Use css transitions for tiles

---
 css/map.css                  | 23 +++++++++++++++++++++++
 js/id/renderer/background.js | 25 +++++++++----------------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/css/map.css b/css/map.css
index 7b35f6bc5..73da09b55 100644
--- a/css/map.css
+++ b/css/map.css
@@ -1,3 +1,26 @@
+/* tiles */
+img.tile {
+    position:absolute;
+    transform-origin:0 0;
+    -ms-transform-origin:0 0;
+    -webkit-transform-origin:0 0;
+    -moz-transform-origin:0 0;
+    -o-transform-origin:0 0;
+    -webkit-user-select: none;
+    -webkit-user-drag: none;
+    -moz-user-drag: none;
+
+    opacity: 0;
+
+    -webkit-transition: opacity 200ms linear;
+    transition: opacity 200ms linear;
+    -moz-transition: opacity 200ms linear;
+}
+
+img.tile-loaded {
+    opacity: 1;
+}
+
 /* base styles */
 path {
     fill: none;
diff --git a/js/id/renderer/background.js b/js/id/renderer/background.js
index 2e6d65fd7..ea580c784 100644
--- a/js/id/renderer/background.js
+++ b/js/id/renderer/background.js
@@ -12,16 +12,6 @@ iD.Background = function() {
         transformProp = iD.util.prefixCSSProperty('Transform'),
         source = d3.functor('');
 
-    var imgstyle = 'position:absolute;transform-origin:0 0;' +
-        '-ms-transform-origin:0 0;' +
-        '-webkit-transform-origin:0 0;' +
-        '-moz-transform-origin:0 0;' +
-        '-o-transform-origin:0 0;' +
-        '-webkit-user-select: none;' +
-        '-webkit-user-drag: none;' +
-        '-moz-user-drag: none;' +
-        'opacity:0;';
-
     function tileSizeAtZoom(d, z) {
         return Math.ceil(tileSize[0] * Math.pow(2, z - d[2])) / tileSize[0];
     }
@@ -92,8 +82,7 @@ iD.Background = function() {
             cache[d[3]] = true;
             d3.select(this)
                 .on('load', null)
-                .transition()
-                .style('opacity', 1);
+                .classed('tile-loaded', true);
             background.apply(sel);
         }
 
@@ -119,12 +108,16 @@ iD.Background = function() {
 
         image.exit()
             .style(transformProp, imageTransform)
-            .transition()
-            .style('opacity', 0)
-            .remove();
+            .classed('tile-loaded', false)
+            .each(function() {
+                var tile = this;
+                window.setTimeout(function() {
+                    tile.remove();
+                });
+            });
 
         image.enter().append('img')
-            .attr('style', imgstyle)
+            .attr('class', 'tile')
             .attr('src', function(d) { return d[3]; })
             .on('error', error)
             .on('load', load);