使用查询选择器的 Angular 动画有问题

Question

我正在尝试使用查询仅对查询选择器中提到的具有 class 的某些元素进行动画处理。

相关代码如下所示：

animations: [
  trigger('fade', [
    transition('void => active', 
      query('.animation-active', [
        animate('0.5s', keyframes([
          style({ opacity: 0.25 }),
          style({ opacity: 1 })
        ]))
      ])
    )
  ])
],

animationFields = ['animate']

values = ['animate', 'not animate']

<div
  *ngFor="let value of values"
  [ngClass]="{ 'animation-active': animationFields.includes(value) }"
  [@fade]="'active'"
> {{value}} </div>

在我尝试使用查询之前它工作得很好，问题是它应用于所有在 HTML 中有 [@fade]="'active'" 行的字段，我只想动画我有 ngClass 添加我的 'animation-active' class.

提前致谢。

编辑：使用准备好的代码进行 stackblitz：

https://stackblitz.com/edit/angular-ivy-tzwwtb?file=src%2Fapp%2Fapp.component.ts

Answer 1

我决定与其使用触发器将动画传递给值的每个成员，不如为它创建一个 angular 指令。

它通过指令为主机组件设置动画解决了上述所有问题，这也解决了我遇到的所有性能问题。

使用查询选择器的 Angular 动画有问题

Problem with Angular Animation using query selector

angular

animation

angular-animations