Анимация SvgElements в старших чартах - PullRequest
Новая
       22

Анимация SvgElements в старших чартах

0 голосов
/ 27 января 2020

Я рисую поля svg на графике, когда они добавляются в группу svg (g). Я хочу анимировать последние добавленные r в svgGroup. Как бы я go об этом? Я могу только оживить их всех. 

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);
    }
  }
...