javascript - Angular ngIf 在两个子组件之间切换时导致高度 CSS 转换

Question

我在 Angular 中有一个“按钮”组件，它有一个 loading输入。如果值为 false它显示按钮的文本，如通过内容投影 ( <ng-content> ) 显示的那样。如果true ，它会隐藏内容并改为显示“微调器”组件。

这是在模板中使用 *ngIf 完成的:

<button class="btn"
  [ngClass]="{'loading': loading}">
  <ng-content *ngIf="!loading"></ng-content>
  <app-spinner *ngIf="loading"></app-spinner>
</button>

这对于在两个 View 之间切换很有效；如果按钮上的输入发生变化，模板会正确呈现它。

但是，当输入发生变化并显示微调器时，它会在按钮的高度上产生奇怪的动画。

当按钮 CSS 具有 transition: all 0.25s ease-out; 时会发生这种情况.如果我对此发表评论，那很好。但如果可能的话，我想保留过渡属性。

我创建了一个 Stackblitz 来演示它: https://stackblitz.com/edit/angular-ngif-in-button-strange-animation

我想知道这是否是因为在 Angular 的变化检测工作时两个组件都在一瞬间显示，但我不确定。

Answer 1

我已经测试了你的 stackblitz，从 .btn 类中删除 padding 将停止增加按钮大小。

发生这种情况是因为在第一帧中，应用了来自 .btn 的填充，使按钮升高了它的高度。之后，从 .loading 类应用第二种样式，它将填充重置为 padding: 0 12px 然后高度变为正常大小。