Fade markers as they are moved in

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

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,

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