时间戳

首页 > 解决方案 > 没有 ngIf 的角度动画

angular - 没有 ngIf 的角度动画

问题描述

我正在尝试从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创建了一个演示。

标签： angulartypescript

解决方案

你应该做的事情是ngFor放弃并使用图像，如下所示：

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

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

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

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

推荐阅读