animation.css ion-listからion-itemsを遅らせます

Question

Ionicで要素のリストからエフェクトを作成しようとしています。私はライブラリ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のクラスを渡しました。そして、私は彼らに千鳥遅延を与えるためにjQueryので.each()を使用します。

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

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

ここ

がngFor-リストと作業のデモです：

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 
     }); 
    }); 

}