具有动态高度的mat-tab-group第一次不能正确设置动画

时间:2019-04-10 16:43:54

标签: angular angular-material mat-tab

我正在使用带有3个标签页的mat-tab-groupdynamicHeight="true"来更改标签页时的高度动画。标签1和2始终具有固定的高度。选项卡2在单击时会初始化一个图表,因此更改后不久,其高度将发生变化以适应该图表。

我不确定mat-tab-group的工作方式,但是我猜测是它节省了标签的高度,以便能够在它们之间进行动画处理。由于更改为选项卡后会立即显示图表,因此在保存高度时似乎没有考虑到图表。因此,当我从选项卡2更改为例如标签1,它将立即从带有图表的标签高度变为没有图表的标签高度,然后从那里动画到标签1的高度。

查看以下gif文件(不要在红色框内打扰): enter image description here

如您所见,它仅在第一次发生,因为第二次我更改为选项卡2,所以图表已经初始化。我希望清楚是什么问题。我知道这不是一个看起来很可怕的大问题,但是如果有可能以某种方式解决这个问题,我内心的完美主义者会感到非常高兴。

如果我对它的工作原理的猜测是正确的,那么也许有一种方法可以明确说明动画应使用的高度?

0 个答案:

没有答案