1

当它改变它的高度/宽度时，是否可以为 flex-layout 拉伸设置动画？例如，如果我*ngFor在其中一个弹性框中有一个并且我添加了新项目，或者如果我*ngIf在其中一个框中有一个，例如这两个示例：

<div fxLayout="row" fxLayoutGap="15px">
  <div class="base-card mat-elevation-z2" fxFlex="50%">
    <div class="content">
      <md-input-container>
        <input mdInput [(ngModel)]="someInput" placeholder="This is an input"/>
      </md-input-container>
      <md-input-container>
        <input mdInput [(ngModel)]="someOtherInput" placeholder="This is another input"/>
      </md-input-container>
    </div>
  </div>
  <div class="base-card mat-elevation-z2" fxFlex="50%">
    <div class="content">
      <div *ngFor="let item of items">
        <md-input-container>
          <input mdInput [(ngModel)]="item.prop" placeholder="ngFor input"/>
        </md-input-container>
        <md-input-container>
          <input mdInput [(ngModel)]="item.name" placeholder="ngFor input 2"/>
        </md-input-container>
        <button md-icon-button (click)="addItem()">
          <md-icon>add</md-icon>
        </button>
      </div>
    </div>
  </div>
</div>

当用户点击addItem()按钮时，一个新项目被添加到*ngFor循环中的项目中，两个fxFlex元素都会增长，但没有任何动画，所以它看起来很不稳定。

或类似的东西，使用*ngIf：

<div fxLayout="row" fxLayoutGap="15px">
  <div class="base-card mat-elevation-z2" fxFlex="50%">
    <div class="content">
      <md-input-container>
        <input mdInput [(ngModel)]="someInput" placeholder="This is an input"/>
      </md-input-container>
    </div>
  </div>
  <div *ngIf="!isLoaded">Data loading...</div>
  <div class="base-card mat-elevation-z2" fxFlex="50%" *ngIf="isLoaded">
    <div class="content">
      <md-input-container>
        <input mdInput [(ngModel)]="another" placeholder="ngIf input"/>
      </md-input-container>
      <md-input-container>
        <input mdInput [(ngModel)]="andAnother" placeholder="ngIf input 2"/>
      </md-input-container>
    </div>
  </div>
</div>

在这里，因为第一个框只有一个输入字段，所以当isLoaded属性从 false 变为 true 时它会被拉伸，同样没有动画，所以它只是捕捉到它的新高度。

使用时是否可以为这些更改设置动画@angular/flex-layout？

4

0 回答 0