angular - 每次使用 Angular 4 更改数组时触发动画

Question

每次数组变化时都需要触发动画

我目前正在使用 *ngfor 迭代一系列产品，每次长度变化时都会触发动画。我正在使用 Angular 4。

<ul class="items col col-md-12" *ngIf="hasProducts()" [@productsIntro]="products.length">

问题是每次数组发生变化时我都需要触发动画，而不仅仅是数组的长度。有时数组长度相同但数组中的项目不同，因此动画不会触发。

我不确定如何解决这个问题，希望有人能帮我解决这个问题。

<ul class="items col col-md-12" *ngIf="hasProducts()" [@productsIntro]="products.length">
    <li class="col col-xs-12 col-sm-12 col-md-4" *ngFor="let product of products">
      <div class="item">
        <a href="" class="product-name">{{product.product_name}}</a>
        <div class="image-and-info col col-xs-8 col-sm-8 col-md-12">
          <div class="product-thumb">
            <img src="../../assets/img-filler.png" alt="{{product.product_name}}">
          </div>
          <div class="info">
            <div class="sku">SKU: {{product.sku}}</div>
            <div class="price">Price: {{product.price | currency:'USD':true:'1.2-2'}}</div>
          </div>
        </div>
        <div class="product-col col col-xs-4 col-sm-4 col-md-12">
          <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-solid" (click)="viewProduct(product)">View Product</button>
            <button type="button" class="btn btn-solid add-to-cart" (click)="addToCart($event)">Add to Cart</button>
          </div>
        </div>
      </div>
    </li>
  </ul>

触发表单组件:

trigger('productsIntro', [
  transition('* => *', [
    query(':enter', style({ opacity: 0 }), {optional: true}),
    query(':enter', stagger('100ms', [
      animate('1s ease-in', keyframes([
        style({opacity: 0, transform: 'translateY(-10%)', offset: 0}),
        style({opacity: .5, transform: 'translateY(10px)',  offset: 0.3}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0}),
      ]))]), {optional: true})
  ])
])

Answer 1

发现products数组长度从0开始变化时没有触发动画。 我的解决方案是删除 HTML 组件中的条件并添加切换函数以在每次更改数组时更改变量状态:

切换功能:

animationState = 'inactive';
toggleState() {
this.animationState = this.animationState === 'active' ? 'inactive' : 'active';

更改自:

<ul class="items col col-md-12" *ngIf="hasProducts()" [@productsIntro]="animationState">
    <li class="col col-xs-12 col-sm-12 col-md-4" *ngFor="let product of products">

改为:

<ul class="items col col-md-12"  [@productsIntro]="animationState">
    <li class="col col-xs-12 col-sm-12 col-md-4" *ngFor="let product of products">