我正尝试在我的应用程序中使用动态列表错开动画。如果可能的话,我想动画进入和离开,但我会安顿下来让进入工作。
animations: [
trigger('slideIn', [
transition(':enter', [
style({
transform: 'translate3d(0,-10px,0)',
opacity: 0
}),
animate('0.1s', style({
transform: 'translate3d(0,0,0)',
opacity: 1
}))
])
])
]
上面是我无法运行的动画代码,下面是我如何将它实现到模板中。
<ion-content [@listAnimation]="eventsList?.length">
<ion-list>
<event-item *ngFor="let item of eventsList" [item]="item"></event-item>
</ion-list>
<empty-list [list]="eventsList" [message]="'There are no event items to display.'"></empty-list>
<ion-infinite-scroll [enabled]="infiniteScroll === null" (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
请让我知道哪里做错了。
最佳答案
我自己还没有制作任何动画,但是根据 : https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#space-things-out-with-stagger
您的代码应该如下所示:
animations: [
trigger('listAnimation', [
transition('* => *', [
// remember that :enter is a special
// selector that will return each
// newly inserted node in the ngFor list
query(':enter', [
style({
transform: 'translate3d(0,-10px,0)',
opacity: 0
}),
animate('0.1s', style({
transform: 'translate3d(0,0,0)',
opacity: 1
}))
])
])
]
那是在你已经得到的基础上添加一个查询
级别
关于Angular 2交错列表动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47833895/