Html 角度动画增量&；减量触发器赢得'；t触发器

我目前正在尝试根据单击的按钮（上一个或下一个）实现具有不同动画的滑块

在我尝试添加触发器之前（没有组和查询），动画工作正常，但只有一种方式

现在我尝试添加两个动画方向，我尝试了以下操作-图像正在更改，但没有动画：

animations: [
    trigger('slideInOut', [
      transition(':increment', group([
        query(':enter', [
          style({
            transform: 'translateX(-200%)',
            filter: 'blur(5px)',
            opacity: 0.7
          }),
          animate('200ms ease-in-out', style({
            transform: 'translateX(0%)',
            filter: 'blur(0px)',
            opacity: 1
          }))
        ]),
        query(':leave', [
          animate('200ms ease-in', style({
            transform: 'translateX(100%)',
            filter: 'blur(2px)',
            opacity: 0.9
          }))
        ])
      ])),
      transition(':decrement', group([
        query(':enter', [
          style({
            transform: 'translateX(200%)',
            filter: 'blur(5px)',
            opacity: 0.7
          }),
          animate('200ms ease-in-out', style({
            transform: 'translateX(0%)',
            filter: 'blur(0px)',
            opacity: 1
          }))
        ]),
        query(':leave', [
          animate('200ms ease-in', style({
            transform: 'translateX(-100%)',
            filter: 'blur(2px)',
            opacity: 0.9
          }))
        ])
      ]))
    ])
  ]
 })

export class FrontComponent implements OnInit {

  image: number = 1;

  increase() {
    this.image = this.image === 1 ? 2 : 1;
  }

  decrease() {
    this.image = this.image === 1 ? 2 : 1;
  }

...

}

---

您需要确保在dom分解之前计算动画触发器的“查询”，因为“查询”是查找内部HTML元素。为此，只需将动画触发器向上移动一级

<div [@slideInOut]="image">
  <img *ngIf="image === 1" src="/assets/images/wrap.png" class="position-absolute w-100" alt="wrap">
  <img *ngIf="image === 2" src="/assets/images/wrap2.png" class="position-absolute w-100" alt="wrap">
</div>

---

您需要确保在dom分解之前计算动画触发器的“查询”，因为“查询”是查找内部HTML元素。为此，只需将动画触发器向上移动一级

<div [@slideInOut]="image">
  <img *ngIf="image === 1" src="/assets/images/wrap.png" class="position-absolute w-100" alt="wrap">
  <img *ngIf="image === 2" src="/assets/images/wrap2.png" class="position-absolute w-100" alt="wrap">
</div>