切换路线时防止角度动画

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 [@.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

尝试一下：

if ($this.hasClass('fa-plus-square')) {
  $this.removeClass('fa-plus-square').addClass('fa-minus-square');
  $showMoreElement.css('display', 'table-row-group');
}

Component.ts：

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