http.get數據並從此數據中更改css Ionic 3

Question

我在實現所需的行為時遇到了一些麻煩。 我的想法是，在我從http.get（）接收數據的那一刻，我訂閱了該方法，並對該數據應用了CSS修改。 問題是我認為在獲取數據之前會先調用它，因此結果不會成功。

我在這里讓您知道我的想法。 這個插件從本地數組獲取數據，所以沒有問題：

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

我的代碼如下：

 constructor(
   public navCtrl    : NavController,
   public navParams  : NavParams,
   public http       : Http,
   public modalCtrl  : ModalController,) {
    // Get info of Excursions
    this.http.get('assets/excursions.json').map(res => res.json().excursions)
    .subscribe(
        data => {
          this.excursions = data;
          let items = $(".excursion-item");
          let time = 500; 
          let timeUnit = `ms`;  

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

}

我執行此操作的視圖：

<ion-card no-padding  class="excursion-item animated fadeInLeft" *ngFor="let excursion of excursions; let i = index;" [id]="i" > <p> Test </p> </ion-card>

如我所說，我想我的問題是不要在正確的時刻應用動畫延遲。

謝謝。

Answer 1

動畫在您的構造函數中可能不適當-相對於$(".excursion-item")可用時，它們可能觸發得太早。 我會嘗試在ionViewWillEnter函數中設置動畫，以延遲CSS更改，直到頁面准備就緒為止。