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

Question

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

5

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

我目前正在使用 *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})
  ])
])

- Travis Michael Heller

数组中的项不同：这些项有什么变化？是什么导致了它们的变化？ - br.julien

根据用户点击的类别按钮，产品将被添加和删除。因此，每当用户点击新的类别按钮时，产品数组都会发生变化。 - Travis Michael Heller

我认为如果你使用状态，你可以在产品数量改变时和在任何地方点击以更改项目时触发动画。 - br.julien

我查看了状态并且在如何在我的代码中实现这一点方面仍然有点困惑。在查看 Angular 文档中的动画部分时，我发现他们使用了 [@heroState]="hero.state"，但是我不确定 hero.state 是指什么。由于我对 Angular 还很陌生，所以如果我忽略了显而易见的地方，请原谅我。 - Travis Michael Heller

目前，我正在让我的动画在数组更改时切换，但第一次显示产品列表时它不起作用。最终在HTML组件上执行了[@productsIntro] = "animationState"，并在每次更改数组时使用切换函数来改变animationState的值。它应该在加载数组时第一次就能正常工作，但实际上并没有，这很令人困惑。 - Travis Michael Heller

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Travis Michael Heller · Accepted Answer

发现当产品数组长度从0开始并改变时，动画未被触发。我的解决方案是在HTML组件中删除条件，并添加toggle函数以在每次数组更改时改变变量状态:

Toggle函数：

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

}

changed from:

<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">