Question

我编写了这段代码，但是它像组一样动画组件中的所有对象，但是我想要一个接一个地播放* ng中的所有元素，首先开始显示，然后在1秒后显示等等......

角度版本：4.2.5

这是我的代码：

组件中的

：

<div *ngFor="let item of posts; index as i" class="col-lg-4" [@flyInOut]>
    <img class="rounded-circle" src="{{featuredmedias[i]}}" alt="Generic placeholder image" width="160" height="160">
    <h2>{{item.title.rendered}}</h2>
    <p>{{item.excerpt.rendered | removeParagrapHtmlTags}}</p>
    <p><a class="btn btn-secondary" routerLink="\{{item.slug}}" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->

.ts文件中的

：

animations: [
trigger('flyInOut', [
  transition('void => *', [
    style({transform: 'translateY(100%)'}),
    animate('0.9s ease-in')
  ])
])

Answer 1

尝试逐个添加它们

组件中的

public index: number = 0;

constructor() {
   this.addNext();
}

addNext() {
  if(this.index < this.posts.length) {
     this.showPosts = this.showPosts.concat([this.posts[this.index++]]);
  }
}

HTML

<div *ngFor="let item of showPosts; index as i" class="col-lg-4" (@flyInOut.done)="addNext()" [@flyInOut]>

Answer 2

您应该根据文档使用动画DSL中的交错功能：https://angular.io/api/animations/stagger

这是来自文档，因为不喜欢独立的答案。

在下面的示例中，有一个容器元素，用于包装由ngFor标记的项目列表。容器元素包含一个动画触发器，稍后将设置为查询每个内部项目。

<!-- list.component.html -->
<button (click)="toggle()">Show / Hide Items</button>
<hr />
<div [@listAnimation]="items.length">
  <div *ngFor="let item of items">
    {{ item }}
  </div>
</div>

Cmoponent代码

import {trigger, transition, style, animate, query, stagger} from '@angular/animations';
@Component({
  templateUrl: 'list.component.html',
  animations: [
    trigger('listAnimation', [
       //...
    ])
  ]
})
class ListComponent {
  items = [];

  showItems() {
    this.items = [0,1,2,3,4];
  }

  hideItems() {
    this.items = [];
  }

  toggle() {
    this.items.length ? this.hideItems() : this.showItems();
  }
}

实际动画代码

trigger('listAnimation', [
  transition('* => *', [ // each time the binding value changes
    query(':leave', [
      stagger(100, [
        animate('0.5s', style({ opacity: 0 }))
      ])
    ]),
    query(':enter', [
      style({ opacity: 0 }),
      stagger(100, [
        animate('0.5s', style({ opacity: 1 }))
      ])
    ])
  ])
])

每个元素的角度分离动画

2 个答案: