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>

这适用于在两个视图之间切换； 如果按钮上的输入更改，模板会正确呈现它。

但是，当输入更改并显示微调器时，会导致按钮高度出现奇怪的动画。

当按钮 CSS 具有transition: all 0.25s ease-out;时会发生这种情况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 ，然后高度变为正常大小。