没有 ngIf 的 Angular 动画

Question

我正在尝试从 CSS 动画 切换到 Angular Animations 并且我无法找到如何在不显示所有元素的情况下为数组中的元素设置动画并仅显示选择了带有 *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并 instaead 像这样使用图像:

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

您应该使用此方法做的另一件事是将查询从 :enter 更改为至 :self为了在 <img/> 上触发动画元素

这是一个StackBlitz带有工作演示(从您的解决方案中 fork 出来)。

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