CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-03-30 08:50:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use css transitions for tiles

Browse Source
This commit is contained in:
Tom MacWright
2013-02-08 11:20:11 -05:00
parent 0b89df063f
commit 2e8e7ad1cc
2 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
css/map.css
View File

@@ -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;

25
js/id/renderer/background.js
View File

@@ -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);