没有 ngIf 的 Angular 动画

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带有工作演示(从您的解决方案中 fork )。

这种方法的唯一问题(这也是您 *ngFor 解决方案的问题)是，如果图像加载速度慢于动画，用户最终将获得错误的体验。