我正在尝试为 ngFor 中的每个项目进行延迟转换。
每个项目都必须在前一个项目之后几毫秒进行动画处理。
这是我的组件代码:
@Component({
selector: 'bookmark-list',
templateUrl: './bookmark.list.component.html',
providers: [BookmarkService],
styleUrls: ['./bookmark.list.component.less'],
animations: [
trigger('myAwesomeAnimation', [
transition(':enter', [
style({transform: 'scale(0.8)',}),
animate('1.5s ease-out', style({transform: 'scale(1)',})),
]),
])
]
})
及其 html 标记:
<div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let bookmark of bookmarks | bookmarkPipe:search">
<div [@myAwesomeAnimation]='"large"'>
<bookmark-item [bookmark]="bookmark"></bookmark-item>
</div>
</div>
有一种方法可以将延迟作为参数传递给 Angular 过渡吗？
编辑
根据 Oluwafemi Sule 的回答，错开是解决方案:
transition('* => *', [
query(':leave', [
stagger(
100, [
animate('0s ease-in-out', style({
transform: 'scale(0.8)'
}))
]
)
], {optional: true}),
query(':enter', [
style({
transform: 'scale(0.8)',
}),
stagger(100, [
animate('0.5s 0.7s ease-in-out', style({
transform: 'scale(1)',
}))
])
], {optional: true})
])
过渡必须改进，但它完成了工作。
和 HTML 标记:
<section class="row" [@myAwesomeAnimation]='bookmarks.length'>
<div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let bookmark of bookmarks | bookmarkPipe:search">
<bookmark-item [bookmark]="bookmark"></bookmark-item>
</div>
</section>
最佳答案
你可以在持续时间之后传递延迟。
animate('1.5s delay ease-out', style({transform: 'scale(1)',})),
您需要为列表中的每个项目计算延迟以实现平滑过渡。
为了实现每个项目的延迟，您需要升级到 Angular 版本 4.2.0–4.3.2 以使用实验性 错开动画函数。
trigger('myAwesomeAnimation', [
transition(':enter', [
query(':leave', [
style({transform: 'scale(0.8)',}),
stagger(100, [
animate('1.5s ease-out', style({transform: 'scale(1)',})),
])
]),
...
]),
])
引用:
关于javascript - 使用 ngFor 的转换延迟 Angular 4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45360306/