Angular 角度-如何使用交错设置组件列表的动画

如何使用交错设置组件列表的动画？ 我还添加了一个没有组件列表的工作版本，这很有效

正如我所说的，我希望使用组件，而不是“呈现”页面中的组件

ts文件：

import { Component } from '@angular/core';
import { trigger, transition, style, animate, query, stagger } from '@angular/animations';

const listAnimation = trigger('listAnimation', [
  transition('* <=> *', [
    query(':enter',
      [style({ opacity: 0 }), stagger('60ms', animate('600ms ease-out', style({ opacity: 1 })))],
      { optional: true }
    ),
    query(':leave',
      animate('200ms', style({ opacity: 0 })),
      { optional: true}
    )
  ])
]);

@Component({
  selector: 'app-somelist',
  templateUrl: './some-list.component.html',
  animations: [listAnimation]
})

export class NocOverviewComponent {
  items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
}

从'@angular/core'导入{Component}；
从“@angular/animations”导入{触发器、转换、样式、动画、查询、交错}；
常量listAnimation=触发器（'listAnimation'[
转换（'**'[
查询（“：输入”，
[样式（{opacity:0}），交错（'60ms'，动画（'600ms减缓'，样式（{opacity:1}））]，
{可选：true}
),
查询（':leave'，
动画（'200ms'，样式（{opacity:0}）），
{可选：true}
)
])
]);
@组成部分({
选择器：“应用程序列表”，
templateUrl:'./some list.component.html'，
动画：[列表动画]
})
导出类nocoverview组件{
项目=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21]；
}

html（不工作）：

某些列表项-{i}

HTML（这很有效）

某些列表项-{i}

我也遇到了类似的问题。尝试使用参差几个小时后，我的解决方案是使用setTimeout（）延迟将组件添加到阵列中，而不是使用参差动画

因此，您的示例可以如下所示：

const listAnimation = trigger('listAnimation', [
    transition(':enter', [
      style({ opacity: 0 }), 
      animate('600ms ease-out', style({ opacity: 1 }))
    ]),
    transition(':leave', [
      animate('200ms', style({ opacity: 0 }))
    ])
]);

<div *ngFor="let item of items" @listAnimation>
  {{ item }}
</div>

export class NocOverviewComponent {
  items: number[] = [];
  delay: number = 60; // Timing of the stagger in milliseconds

  constructor() {
    this.populateItems();
  }

  populateItems(): number[] {
    let count = 0;
    while (count < 22) {
      this.items.push(count);
      setTimeout(() => {
        ++count;
      }, this.delay);
  };
}

const listAnimation=trigger（'listAnimation'[
转换（“：输入”[
样式（{不透明度：0}），
设置动画（'600ms减缓'，样式（{不透明度：1}））
]),
过渡（“：离开”[
动画（'200ms'，样式（{不透明度：0}））
])
]);
{{item}}
导出类nocoverview组件{
项目：编号[]=[]；
延迟：number=60；//以毫秒为单位的参差计时
构造函数（）{
this.populateItems（）；
}
populateItems（）：编号[]{
让计数=0；
而（计数<22）{
此项为.items.push（计数）；
设置超时（（）=>{
++计数；
}，这是延迟）；
};
}

我也遇到了类似的问题。在尝试使用参差数小时后，我的解决方案是使用setTimeout（）延迟将组件添加到阵列中，而不是使用参差动画

因此，您的示例可以如下所示：

const listAnimation = trigger('listAnimation', [
    transition(':enter', [
      style({ opacity: 0 }), 
      animate('600ms ease-out', style({ opacity: 1 }))
    ]),
    transition(':leave', [
      animate('200ms', style({ opacity: 0 }))
    ])
]);

<div *ngFor="let item of items" @listAnimation>
  {{ item }}
</div>

export class NocOverviewComponent {
  items: number[] = [];
  delay: number = 60; // Timing of the stagger in milliseconds

  constructor() {
    this.populateItems();
  }

  populateItems(): number[] {
    let count = 0;
    while (count < 22) {
      this.items.push(count);
      setTimeout(() => {
        ++count;
      }, this.delay);
  };
}

const listAnimation=trigger（'listAnimation'[
转换（“：输入”[
样式（{不透明度：0}），
设置动画（'600ms减缓'，样式（{不透明度：1}））
]),
过渡（“：离开”[
动画（'200ms'，样式（{不透明度：0}））
])
]);
{{item}}
导出类nocoverview组件{
项目：编号[]=[]；
延迟：number=60；//以毫秒为单位的参差计时
构造函数（）{
this.populateItems（）；
}
populateItems（）：编号[]{
让计数=0；
而（计数<22）{
此项为.items.push（计数）；
设置超时（（）=>{
++计数；
}，这是延迟）；
};
}

您也可以使用动画css。导入css后，只需添加class='animated fadeIn'之类的类，我看不到代码中有任何错误。谢谢您的审阅。animate.css或纯css（动画）我不会创建我想要的效果。它会精确地同时设置组件的动画，而不是作为一个序列。在您的示例中，您使用的是跨度而不是组件。正如我在问题中提到的。您也可以使用动画css。导入其css后，只需添加class='animated fadeIn'之类的类，我看不到代码中的任何错误。谢谢r review.animate.css或纯css（动画）我不会创建我想要的效果。它将精确地同时设置组件动画，而不是作为序列。在您的示例中，您使用的是跨度而不是组件。正如我在问题中提到的。感谢您进行此更新/解决方案。这也是一个选项，但我不希望使用延迟。感谢您进行此更新/解决方案。这也是一个选项选项，但我不想使用延迟。

const listAnimation = trigger('listAnimation', [
    transition(':enter', [
      style({ opacity: 0 }), 
      animate('600ms ease-out', style({ opacity: 1 }))
    ]),
    transition(':leave', [
      animate('200ms', style({ opacity: 0 }))
    ])
]);

<div *ngFor="let item of items" @listAnimation>
  {{ item }}
</div>

export class NocOverviewComponent {
  items: number[] = [];
  delay: number = 60; // Timing of the stagger in milliseconds

  constructor() {
    this.populateItems();
  }

  populateItems(): number[] {
    let count = 0;
    while (count < 22) {
      this.items.push(count);
      setTimeout(() => {
        ++count;
      }, this.delay);
  };
}