Leaflet 的脉冲动画有奇怪的行为 [包括 GIF]答案

【问题标题】：Pulse animation with Leaflet has weird behaviour [GIF included]Leaflet 的脉冲动画有奇怪的行为 [包括 GIF]
【发布时间】：2017-11-26 10:33:30
【问题描述】：

我想用 Leaflet 在标记上制作脉冲动画，但我的行为很奇怪。

CSS

.mapbox-marker {
    mix-blend-mode: screen;
}

.animate {
    transition-property: transform;
    -webkit-animation: pulsate 30s ease-out;
    -webkit-animation-iteration-count: 1; 
    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;}
}

这是我的标记

myCircleMarker = L.CircleMarker.extend({options: {
  radius: currentRadius,
  stroke: false,
  fillColor: '#FFFFFF',
  fillOpacity: 1,
  clickable: false,
  className: 'mapbox-marker animate'
}});

当我添加我的标记时

function addMarkersBatch(positions) {
    var markers = []
    positions.forEach(function(position) {
        var marker = new myCircleMarker(position);
        marker.setRadius(currentRadius*1.8);
        marker.setStyle({fillColor: "#fe5928"});
        map.addLayer(marker);
        markers.push(marker);
    });
}

动画如预期的那样，但它带有一个非常奇怪的标记行为。我只想让标记在地图位置上缩放，但它在缩放时会在屏幕上移动。

希望大家帮忙

【问题讨论】：

标签： javascript css leaflet

【解决方案1】：

显然修复很容易。我只需要将transform-origin 设置为居中

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.0, 0.0); 
        opacity: 0.0;
        transform-origin:center;
    }
    1% {
        -webkit-transform: scale(1.5, 1.5); 
        opacity: 1.0;
    }
    5% {
        -webkit-transform: scale(0.8, 0.8); 
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -webkit-transform: scale(0.4, 0.4); 
        opacity: 0.0;
    }
}

【讨论】：