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

Question

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

我正在使用以下CSS代码来创建'脉动'动画:

.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类):

// 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代码slighlty:

.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类的实例化:

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