angular - Angular 动画组件在 :enter 之前在屏幕上闪烁

Question

我正在制作一张图表，可在https://stackblitz.com/edit/angular-coral-chart-demo获得。我的目标是制作一个堆叠条形图，它使用 Angular 组件进行渲染，并随着每个子 (svg) 组件逐步进出动画。

我已经阅读了文档和几个教程，但我不确定为什么内容会在 :enter 动画开始之前出现在屏幕上。要查看问题，请重新加载屏幕，并查看在进入动画开始之前闪烁的不需要的元素。我还尝试对更改进行去抖动并调整渲染大小，如果这是由于太多事件导致的性能问题，但没有帮助。

动画位于stacked-bar.animation.ts 中，并通过对类的查询加载到各个条形图中的每个矩形上。当您重新加载选项卡或调整屏幕大小时，屏幕上出现的内容会消失，然后退出和进入动画开始。即使查看者需要等待，也希望获得任何帮助以仅使用进入和退出动画呈现内容。

标签： angularsvgangular-animations