Fatal编程技术网
  • javascript/
  • Javascript 在两个子组件之间切换时，Angular ngIf会导致高度CSS转换

Javascript 在两个子组件之间切换时，Angular ngIf会导致高度CSS转换

javascript angular

Javascript 在两个子组件之间切换时，Angular ngIf会导致高度CSS转换,javascript,angular,Javascript,Angular,我有一个角度的“按钮”组件，有一个加载输入。如果该值为false，则显示通过内容投影显示的按钮文本（）。如果true，则隐藏内容并显示“微调器”组件 使用*ngIf在模板中完成此操作： <button class="btn" [ngClass]="{'loading': loading}"> <ng-content *ngIf="!loading"></ng-content> <app-spinner *ngIf="loading">&

我有一个角度的“按钮”组件，有一个
加载
输入。如果该值为
false
，则显示通过内容投影显示的按钮文本（
）。如果
true
，则隐藏内容并显示“微调器”组件

使用
*ngIf
在模板中完成此操作：

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





我想知道这是否是因为在瞬间，Angular的更改检测工作时，这两个组件都显示在屏幕上，但我不确定。
我已经测试了stackblitz，并从
中删除了
填充
。btn
类将停止增加按钮大小


这是因为在第一帧中，应用了
.btn
中的填充，使按钮升高其高度。然后，从
.loading
类应用第二种样式，它将填充重置为
padding:0 12px
，然后高度变为正常大小。
为什么要保留transition属性？你想在那个按钮上设置什么动画？与其将其设置为“全部”，不如仅将其设置为实际要设置动画的属性。组件不“存在”在一起，它们会被交换，但您告诉浏览器要花0.25秒来设置按钮的动画，所以它们会保持在一起。您也可以在加载程序中以0,25秒的延迟设置动画