Angular 2错开列表动画

发布时间：2020-12-17 07:02:28 所属栏目：安全来源：网络整理

导读：我试图用动态列表在我的应用程序中错开动画.我想动画进入和离开,如果可能的话,但只会让你进入工作. animations: [ trigger('slideIn',[ transition(':enter',[ style({ transform: 'translate3d(0,-10px,0)',opacity: 0 }),animate('0.1s',style({ transform

我试图用动态列表在我的应用程序中错开动画.我想动画进入和离开,如果可能的话,但只会让你进入工作.

animations: [
    trigger('slideIn',[
        transition(':enter',[
            style({
                transform: 'translate3d(0,-10px,0)',opacity: 0
            }),animate('0.1s',style({
                transform: 'translate3d(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,opacity: 0
        }),style({
            transform: 'translate3d(0,opacity: 1
        }))
    ])
])  
]

这就是为您已经获得的内容添加查询级别

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!