如何给数据图中的气泡添加动画效果 angular 8？

Question

我希望使用 angular 中的数据图为 svg 地图中的气泡添加动画效果 8. 气泡显示正确，但动画不工作。这是我到目前为止尝试过的

.bubbles circle.datamaps-bubble  {
  -webkit-animation: ripple 0.7s linear infinite;
      animation: ripple 0.7s linear infinite;
}
@-webkit-keyframes ripple {
  0% {
      box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
 }
 100% {
   box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
 }
}
@keyframes ripple {
 0% {
    box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
 }
 100% {
    box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
 }
}

Answer 1

你可以使用一个插件 fading bubbles 来做到这一点

this.worldMap.addPlugin('fadingBubbles', fadingBubbles);

_this = this;
    setInterval(function() {
        drawBubbles(_this);
     }, 2000); 
    drawBubbles(this);
    _drawDOT(this);
    function drawBubbles(that){
        that.worldMap.fadingBubbles(that.mapBubbles, {  });

    }

如何给数据图中的气泡添加动画效果 angular 8？

How to add animation effect on bubbles in datamaps angular 8?

animation

datamaps

angular