css - 添加时淡入传单标记

Question

我的 map 在滚动时从 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