由ngFor生成的Angular 2 animate元素

发布时间：2020-12-17 09:16:40 所属栏目：安全来源：网络整理

导读：我不熟悉Angular 2中的动画,所以我可能会遗漏一些明显的动画,但是如何为* ngFor循环生成的元素设置动画？似乎动画与组件绑定,必须在@Component装饰器中定义？是唯一的解决方案来创建一个内部组件,并在* ngFor中创建,然后动画那个？以下是* ngFor循环中生成

我不熟悉Angular 2中的动画,所以我可能会遗漏一些明显的动画,但是如何为* ngFor循环生成的元素设置动画？似乎动画与组件绑定,必须在@Component装饰器中定义？

是唯一的解决方案来创建一个内部组件,并在* ngFor中创建,然后动画那个？

以下是* ngFor循环中生成的元素的淡入动画示例.

my.component.ts

@Component({
  selector: ...,templateUrl: 'my-component.html',styleUrls: ...,animations: [
    trigger('fadeIn',[
      transition(':enter',[
        style({ opacity: '0' }),animate('.5s ease-out',style({ opacity: '1' })),]),],})

我-component.html

<div *ngFor="let item of myArray" @fadeIn>I'm an Item</div>

注意：如果你想使用具有特定状态的动画,你应该像这样绑定状态：

[@myAnimation]="'myState'"

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!