Question

我的地图在滚动时从API加载图标。延迟使标记弹出，我不喜欢在视觉上。优选地，它们会从像素增长到正常大小或淡入。我认为淡入对于css3过渡并不太难。标记具有方法setOpacity(n)所以我尝试初始化标记，如

@marker = L.marker(
    coordinates,
    {opacity: .1}
).on('add', ->
    @setOpacity(1)
)

因为我意识到添加一个标记是异步的所以如果我过早地设置不透明度，则转换将不适用，因为标记元素不在DOM中，并且标记将以完全不透明度呈现。这就是我尝试收听add事件的原因。但这不起作用。显然事件发生得太早了。如果我将setOpacity置于超时，它可以正常工作。但我认为这不是一个好的方法，特别是因为它在API之上引入了更多的延迟。

如何淡入我的图标？我想很多人都想要这个功能，所以也许它会是一个很好的传单插件。

Answer 1

这可以通过将关键帧动画附加到leaflet-marker-icon和leaflet-marker-shadow类来完成。关键帧动画是诀窍，因为它是自动调用的，因此您不需要在运行时添加任何类来启动动画。当地图加载标记并添加标记时，动画可以工作。请尝试以下代码示例：

.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的一个例子：http://plnkr.co/edit/kw4zFqqbtfEFQzN4fg8U?p=preview

添加时淡入小叶标记

1 个答案: