我编写了这段代码,但是它像组一样动画组件中的所有对象,但是我想要一个接一个地播放* 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 »</a></p>
</div><!-- /.col-lg-4 -->
.ts文件中的:
animations: [
trigger('flyInOut', [
transition('void => *', [
style({transform: 'translateY(100%)'}),
animate('0.9s ease-in')
])
])
答案 0 :(得分:0)
尝试逐个添加它们
组件中的
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]>
答案 1 :(得分:0)
您应该根据文档使用动画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 }))
])
])
])
])