From 630d7ec0cd19f9ef55f3355fc4e78eac242b1b43 Mon Sep 17 00:00:00 2001
From: danzel <danzel@localhost.geek.nz>
Date: Mon, 16 Jul 2012 10:40:39 +1200
Subject: [PATCH] Fade markers as they are moved in

---
 src/MarkerCluster.css     |  8 ++++----
 src/MarkerCluster.js      | 14 +++++++++-----
 src/MarkerClusterGroup.js | 17 ++++++++++++-----
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/MarkerCluster.css b/src/MarkerCluster.css
index eca6e36e3b..a915c1a4bf 100644
--- a/src/MarkerCluster.css
+++ b/src/MarkerCluster.css
@@ -1,6 +1,6 @@
 .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
-	-webkit-transition: -webkit-transform 0.25s ease-out;
-	-moz-transition: -moz-transform 0.25s ease-out;
-	-o-transition: -o-transform 0.25s ease-out;
-	transition: transform 0.25s ease-out;
+	-webkit-transition: -webkit-transform 0.25s ease-out, opacity 0.25s ease-in;
+	-moz-transition: -moz-transform 0.25s ease-out, opacity 0.25s ease-in;
+	-o-transition: -o-transform 0.25s ease-out, opacity 0.25s ease-in;
+	transition: transform 0.25s ease-out, opacity 0.25s ease-in;
 	}
diff --git a/src/MarkerCluster.js b/src/MarkerCluster.js
index 9a34e86f22..8c13f2ee02 100644
--- a/src/MarkerCluster.js
+++ b/src/MarkerCluster.js
@@ -120,7 +120,7 @@ L.MarkerCluster = L.Marker.extend({
 			//Only do it if the icon is still on the map
 			if (m._icon) {
 				m._setPos(center);
-				//TODO Scale them down as they move? Fade them as they move?
+				m.setOpacity(0);
 			}
 		}
 
@@ -129,6 +129,7 @@ L.MarkerCluster = L.Marker.extend({
 				var cm = childClusters[j];
 				if (cm._icon) {
 					cm._setPos(center);
+					cm.setOpacity(0);
 				}
 			}
 		} else {
@@ -202,17 +203,20 @@ L.MarkerCluster = L.Marker.extend({
 	},
 
 	_recursivelyRemoveChildrenFromMap: function (depth) {
+		var m;
 		//markers
 		for (var i = 0; i < this._markers.length; i++) {
-			//TODO: animate removing
-			L.FeatureGroup.prototype.removeLayer.call(this._group, this._markers[i]);
+			m = this._markers[i];
+			L.FeatureGroup.prototype.removeLayer.call(this._group, m);
+			m.setOpacity(1);
 		}
 
 		if (depth === 1) {
 			//child clusters
 			for (var j = 0; j < this._childClusters.length; j++) {
-				//TODO: animate removing
-				L.FeatureGroup.prototype.removeLayer.call(this._group, this._childClusters[j]);
+				m = this._childClusters[j];
+				L.FeatureGroup.prototype.removeLayer.call(this._group, m);
+				m.setOpacity(1);
 			}
 		} else {
 			var childClusters = this._childClusters,
diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js
index 44667af392..29cfca6fba 100644
--- a/src/MarkerClusterGroup.js
+++ b/src/MarkerClusterGroup.js
@@ -474,28 +474,35 @@ L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? {
 			c._recursivelyAnimateChildrenIn(this._map.latLngToLayerPoint(c.getLatLng()).round(), depth);
 
 			if (bounds.contains(c._latlng)) { //Add the new cluster but have it be hidden (so it gets animated, display=none stops transition)
+				c.setOpacity(0);
 				c._addToMap();
-				c._icon.style.visibility='hidden';
 			}
 		}
 		this._inZoomAnimation++;
 
 		var me = this;
+
 		//TODO: Maybe use the transition timing stuff to make this more reliable
+		setTimeout(function () {
+			for (i = 0; i < newClusters.length; i++) {
+				var n = newClusters[i];
+
+				if (n._icon) {
+					n.setOpacity(1);
+				}
+			}
+		}, 0);
 		setTimeout(function () {
 
 			map._mapPane.className = map._mapPane.className.replace(' leaflet-cluster-anim', '');
 			for (i = 0; i < newClusters.length; i++) {
 				var cl = newClusters[i];
-				if (cl._icon) { //Make those clusters that are now there, visible
-					cl._icon.style.visibility='visible';
-				}
 				cl._recursivelyRemoveChildrenFromMap(depth);
 			}
 			for (i = newUnclustered.length - 1; i >= 0; i--) {
 				var m = newUnclustered[i];
 				if (bounds.contains(m._latlng)) {
-					L.FeatureGroup.prototype.addLayer.call(me, m); //TODO Animate
+					L.FeatureGroup.prototype.addLayer.call(me, m);
 				}
 			}
 			me._inZoomAnimation--;