切换路线时防止角动画

Question

我有一个对象数组，我想在删除时设置动画：

<div [@arrayAnim]="motives.length">
    <div class="motive" *ngFor="let motive of motives"><div>
    <div class="motive-name">{{motive.name}}</div>
    ...

    <mat-icon class="delete-icon" (click)="deleteMotive(motive)">delete</mat-icon>
</div>

在我的组件动画中，我构建了一个数组动画触发器，如下所示：

@Component({
  selector: 'app-motives',
  templateUrl: './motives.component.html',
  styleUrls: ['./motives.component.scss'],
  animations: [
    trigger('arrayAnim', [
      transition('* => *', [
        query(':leave', stagger('300ms', [
          animate('500ms ease-out', keyframes([
            style({opacity: 1, transform: 'scale(1.1)', offset:0}),
            style({opacity: .5, transform: 'scale(.5)', offset: .3}),
            style({opacity: 0, transform: 'scale(0)', offset:1})
          ]) )
        ]), {optional: true})
      ])
    ])
  ]
})

当 siwtching 路由时，即使我没有删除数组的任何元素，也会触发转换。我不明白这种行为。为什么路由改变时会触发动画？

我在 stackblitz 上创建了一个最小示例：

https://stackblitz.com/edit/angular-ivy-wdyzlh?file=src/app/prices/prices.component.ts

从价格到产品到价格路径的切换将触发意外行为。删除价格将按预期工作。

更新

正如评论中所建议的，我可以将 arrayAnim div 包装在另一个会禁用基于组件变量的动画的 div 中。

<div [@.disabled]="noAnimation">
    <div [@arrayAnim]="motives.length" (@arrayAnim.done)="onAnimationDone()">
        <div class="motive" *ngFor="let motive of motives"><div>
        <div class="motive-name">{{motive.name}}</div>
        ...

        <mat-icon class="delete-icon" (click)="deleteMotive(motive)">delete</mat-icon>
    </div>
</div>

在我的组件中，我有一个 noAnimation 属性，一旦删除完成，该属性就会切换为 true。触发 deleteMotive() 方法时，no animation 属性将设置为 false

Answer 1

试试这个：

<div [@.disabled]="noAnimation">
  <div [@arrayAnim]="priceArray.length">
    <div *ngFor="let p of priceArray" class="price" (click)="deletePrice(p)">
      Regular: {{p.regular}}
      Discounted: {{p.discounted}}
    </div>
  </div>
</div>
<p>Click on a price to delete it</p>

组件.ts：

  noAnimation = true;

  deletePrice(p) {
    this.noAnimation = false;
    this.priceArray = this.priceArray.filter(price => price != p);

    //After animiation was executed - disable it again

    setTimeout(()=> {
      this.noAnimation = true;
    }, 500);
  }