Angular 2交错列表动画 [英] Angular 2 stagger list animation

问题描述

我试图用动态列表错开应用中的动画。我想让动画进入和离开（如果可能的话），但会安顿下来以便继续工作。

I am trying to stagger an animation in my app with a dynamic list. I would like to animation enter and leave if possible but would settle just to get the on enter to work.

animations: [
    trigger('slideIn', [
        transition(':enter', [
            style({
                transform: 'translate3d(0,-10px,0)',
                opacity: 0
            }),
            animate('0.1s', style({
                transform: 'translate3d(0,0,0)',
                opacity: 1
            }))
        ])
    ])  
  ]

上面是我无法运行的动画代码，下面是如何将其实现到模板中。

Above is the animation code that I cannot get to run and below is how I implemented it into the template.

<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>

请让我知道我哪里出错了。

Please let me know where I have gone wrong.

推荐答案

我自己尚未制作任何动画，但根据：
https://www.yearofmoo.com/2017/06/new-wave-of-animation -features.html＃space-things-out-with-stagger

Haven't done any animations myself yet, but according to : 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
        }))
    ])
])  
]

正在将查询级别添加到您已经拥有的

That is adding a query level to what you already got

这篇关于Angular 2交错列表动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！