Question

所以我试图为* ngFor循环中的元素应用不同的动画。最简单的示例如下：

@Component({
  selector: 'app-anims',
  templateUrl: './anims.component.html',
  styleUrls: ['./anims.component.css'],
  animations: [
    trigger('scrolledToAnimation0', [
      state('first', style({
        backgroundColor: "white"
      })),
      state('second', style({
        backgroundColor: "yellow"
      })),
      transition('first => second', [
        animate('1s')
      ]),
    ]),
    trigger('scrolledToAnimation1', [
      state('first', style({
        backgroundColor: "white"
      })),
      state('second', style({
        backgroundColor: "green"
      })),
      transition('first => second', [
        animate('0.40s')
      ]),
    ])
  ]
})

scrolledTo: boolean = false;
divElements: string[] = ["foo", "bar"];

  @HostListener('window:scroll', ['$event'])
    checkScroll() {
      let componentPosition = this.el.nativeElement.offsetTop0;
      let scrollPosition = window.pageYOffset;

      if (scrollPosition >= componentPosition && this.scrolledTo === false) {
        this.scrolledTo = true;
      }

    }

HTML：

<div *ngFor="div of divElements; let i = index" [@scrolledToAnimation0]="???" [@scrolledtoAnimation1]="???"></div>

我尝试了几种方法，但似乎都没有用。感谢您的帮助-预先感谢。

Answer 1

我顺便弄清楚了。可以在声明的同一个div中访问变量“ index”（或别名为“ i”），并可用于引用每个* ngFor元素。

可以通过以下方式完成：

<div
*ngFor="let item of Array; let i = index;"
[@animationName]="i === 0 ? 'firstAnimation' : 'secondAnimation'">
</div>

上面引用了数组的第一个元素。

为* ngFor中的元素应用不同的动画

1 个答案: