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

Question

我想用 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);
    });
}

动画符合预期，但带有非常奇怪的标记行为。我只希望标记在 map 位置上缩放，但它在缩放时在屏幕上移动。

希望大家帮忙

Answer 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;
    }
}