使用 CSS3 动画的脉动传单标记

Question

我想在 Leaflet 地图上创建一个自定义脉动地图标记图标。出于学习目的，我不想使用第三方插件。

我正在使用以下 CSS 代码创建 'pulsating'-动画：

.gps_ring {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;    
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;     
}   
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

我正在使用 Leaflet 的 DivIcon 来更改标记的可视化（参考上面的 CSS class）：

// Define an icon called cssIcon
var cssIcon = L.divIcon({
    // Specify a class name we can refer to in CSS.
    className: 'gps_ring'
});

// Create markers and set their icons to cssIcon
L.marker([50.5, 30.5], {icon: cssIcon}).addTo(map);

此方法目前不起作用。动画标记图标始终显示在地图的左上角。似乎变换（比例）打破了当前标记位置：

顺便说一句，我在 Windows 7 和 Yosemite.

上使用 Chrome 44.x

我在这里创建了一个最小的例子：

http://jsfiddle.net/christianjunk/q69qx45c/1/

出了什么问题？为什么动画会破坏标记的地图位置？

Answer 1

经过一段时间的调查，我找到了解决问题的方法：

我稍微更改了 CSS 代码：

.css-icon {

}

.gps_ring { 
    border: 3px solid #999;
     -webkit-border-radius: 30px;
     height: 18px;
     width: 18px;       
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    /*opacity: 0.0*/
}

@-webkit-keyframes pulsate {
        0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
        50% {opacity: 1.0;}
        100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

并且我更改了 DivIcon 的实例化 class:

// Define an icon called cssIcon
var cssIcon = L.divIcon({
  // Specify a class name we can refer to in CSS.
  className: 'css-icon',
  html: '<div class="gps_ring"></div>'
  // Set marker width and height
  ,iconSize: [22,22]
  // ,iconAnchor: [11,11]
});

以下方法成功了：我现在使用 内部 html 到运行 CSS 动画。这将保留标记的位置。还要注意 iconSize 属性，它具有转换后图标的总大小（21 px =~ 18px x 1.2）。以这种方式设置动画圆圈在坐标处的中心：

工作示例：http://jsfiddle.net/christianjunk/waturuoz/

我还是想不通，为什么我的第一种方法不起作用。

Answer 2

您原来的方法不起作用，因为您使用了转换（Leaflet 也使用它来放置它的标记）。

被覆盖的传单放置示例：

transform: translate3d(499px, 604px, 0px);

使用 CSS3 动画的脉动传单标记

Pulsating Leaflet marker using CSS3 animations

html

javascript

css

mapping

leaflet