Question

当改变它的高度/宽度时，是否可以为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？

时是否可以设置这些更改的动画

动画角度柔性布局拉伸

0 个答案: