Fading in flyer markers when adding
My map loads icons from API on scrolling. The delay makes markers popular, which I don't like visually. Preferably, they will grow from a pixel to their normal size or fade out. I figured it wouldn't be too hard to do with css3 transitions. Markers have a method setOpacity(n)
, so I tried to initialize the marker like
@marker = L.marker(
coordinates,
{opacity: .1}
).on('add', ->
@setOpacity(1)
)
because I realized that adding the marker was asynchronous, so if I set the opacity too early, the transition would not be applied because the marker element was not in the DOM and the marker would be displayed at full opacity. This is why I tried to listen to the event add
. But it doesn't work. apparently the event is too early. If I set setOpacity to timeout it works fine. But I don't think this is a good way to write it, especially because it introduces even more latency on top of the API.
How can I disappear into my icons? I think a lot of people need this feature, so maybe this would be a nice elevator poster.
source to share
You can do this by linking the keyframe animation to marker markers and marker sheets. Keyframe applique is what does the trick because it is self-grabbing, so you don't need to add any classes at runtime to trigger the animation. The animation works when the map is loaded with markers and a marker is added. Try the example below the code:
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Plunker example: http://plnkr.co/edit/kw4zFqqbtfEFQzN4fg8U?p=preview
source to share