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

当产品数组长度从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">

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

1 个答案: