我正在尝试使用动态列表在我的应用程序中交错播放动画。如果可能的话,我希望动画进入和离开,但我会解决只是为了让进入工作。
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 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
}))
])
])
]
那就是添加一个query
达到你已有的水平
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)