没有 ngIf 的角度动画

Question

我正在尝试从 CSS 动画 切换到 Angular 动画，但我不知道如何在不显示所有元素的情况下为数组中的元素设置动画并且只显示选择一个带有 *ngIf。

动画在 TS 文件中定义如下：

@Component({
  ...
  animations: [
    trigger("carouselAnimation", [
      // Next
      transition(":increment", [
        query(":enter", [
          style({ opacity: 0, transform: "translateX(100%)" }),
          animate(".3s", style({ opacity: 1, transform: "translateX(0)" }))
        ])
      ]),
      // Previous
      transition(":decrement", [
        query(":enter", [
          style({ opacity: 0, transform: "translateX(-100%)" }),
          animate(".3s", style({ opacity: 1, transform: "translateX(0%)" }))
        ])
      ])
    ])
  ]
})

在 HTML 中，选中的图像显示如下：

<div [@carouselAnimation]="counter">
    <ng-container *ngFor="let img of images; let i=index">
        <img [src]="img" style="height:200px; width:200px" *ngIf="i===counter"/>
    </ng-container>
</div>

到目前为止一切正常，但我想做的是在不显示所有其他图像的情况下为图像设置动画，并使用 *ngIf 隐藏它们并仅保留选定的图像：

<div [@carouselAnimation]="counter">
    <img [src]="imgSrc" style="height:200px; width:200px">
</div>

但如果我这样做，动画就不再起作用了。

我还在Stackblitz创建了一个演示。

Answer 1

你应该做的是放弃ngFor，而是像这样使用图像：

<img [@carouselAnimation]="counter" [src]="images[counter]" style="height:200px; width:200px" />

您应该用这种方法做的另一件事是将查询从:enter 更改为:self，以便在<img/> 元素上触发动画

这是一个 StackBlitz 带有工作演示（来自您的解决方案）。

这种方法的唯一问题（这也是您*ngFor 解决方案的问题）是，如果图像加载速度比动画慢，用户最终会遇到错误的体验。