在Highcharts中对SvgElement进行动画处理

时间:2020-01-27 14:52:28

标签: angular angular2-highcharts

我正在将图表中的svg框添加到svgGroup(g)中。我想为svgGroup中最新添加的r设置动画。我将如何处理?我只能为所有这些动画。

private buildBidsSvgElement(chart: Highcharts.Chart, items: Items[]): {
  svgGroup: Highcharts.SVGElement }

  const r = chart.renderer.rect(xStart, yTop, xEnd - xStart, Math.abs(yBottom - yTop));
  r.attr({
    class: 'rect',
    fill: bid.isBlockBid ? BLOCK_BID_COLOR : BID_COLOR,
    opacity: BID_OPACITY,
  });
  r.add(svgGroup);
 
return {
  svgGroup,
  maxBidY
};

::ng-deep {
    .rect {
        animation: expand .5s ease-in-out 1;
    }
} 

@keyframes expand {
    from {
      transform: scale(2);
    }
    to {
        transform: scale(0);
    }
  }

0 个答案:

没有答案