animation.css延迟离子列表中的离子项目

Question

我想从离子列表中创建一个元素的效果。我正在使用库animate.css，我想在构成列表的元素之间做一个延迟。在这example它显示了我想要做什么。

问题是，我不知道如何做到这一点在CSS上设置每个项目的延迟。

这里是我的代码：

<ion-content padding> 
<ion-card> 
    <ion-card-header> 
    <ion-card-title>Rooms Avaliables</ion-card-title> 
    </ion-card-header> 
<ion-list> 
    <ion-item class="animated fadeInLeft" *ngFor="let room of rooms"> 
    {{room |json}} 
    </ion-item> 
</ion-list> 
</ion-card> 
</ion-content> 

但我得到什么，很明显，都淡入在同一时间留下的物品。

非常感谢你，任何建议，将不胜感激。

Answer 1

对不起，我对Angular不太了解。快速解决方案是通过JS或jQuery将延迟添加到列表项中。

首先，我给你的清单项目一类.room-item。然后我用.each() jQuery中给他们交错延迟：

let items = $(".room-item"); 
let time = 500; 
let timeUnit = 'ms'; 

items.each(function(index){ 
    $(this).css({ 
      'animation-delay' : (1+index) * time + timeUnit 
    }); 
}); 

这是一个带ngFor-list中的工作演示：

https://plnkr.co/edit/40pjd9t8rVTMG2k9XZnz?p=preview

我加入了脚本app/app.component.ts：

ngAfterViewInit() { 

    let items = $(".room-item"); 
    let time = 500; 
    let timeUnit = `ms`; 

    items.each(function(index){ 
     $(this).css({ 
       'animation-delay' : (1+index) * time + timeUnit 
     }); 
    }); 

}