離子3角度等待動畫完成使用動畫CSS庫

Question

我有一個列表是使用離子網格與表示項目的行構建的。

我使用css動畫庫https://github.com/fabiandev/css-animator在用戶刪除列表中的項目時顯示動畫。在HTML看起來像

<ion-list> 
    <ion-grid no-padding> 
     <ion-row *ngFor="let task of tasks" no-padding style="border-top:1px solid #AFAFAF"> 
      <ion-col no-padding #myElement> 
       <ion-row nowrap><ion-col col-1><ion-icon *ngIf="task.overdue == 'true'" color="danger" name="alert"></ion-icon></ion-col> 
        <ion-col > 
         <ion-label class="widget-para-title">{{task.name}}</ion-label> 
         <ion-label class="widget-para-text">{{task.description}}</ion-label> 
        </ion-col> 
        <ion-col col-auto> 
         <ion-icon style="color:#8D8D8D;zoom:1.5" name="ios-more" (click)="delete($event, task.taskId)"></ion-icon> 
        </ion-col> 
       </ion-row> 
      </ion-col> 
     </ion-row> 
    </ion-grid> 
</ion-list> 

刪除事件做：

delete() { 
    this.animator.setType('rollOut').show(this.myElem.nativeElement); 
    this.tasks = this.tasks.filter(
     (data) => data.taskId != id 
    ) 
}) 

所以如果我評論過濾部分我看到動畫。但如果我取消註釋，那麼我不會因爲我猜刪除元素（數組過濾器）殺死它。應該怎樣處理它

Answer 1

你看不到動畫，因爲該元素已從死命中移除。所以它不能動畫。你應該等待動畫結束然後做過濾器。要做到這一點，你有兩種方式：

方法1：只需設置超時時間爲您的過濾器：

delete() { 
    this.animator.setType('rollOut').show(this.myElem.nativeElement); 
    setTimeout(()=>{ 
     this.tasks = this.tasks.filter(
     (data) => data.taskId != id 
    ) 
    },300); 
}) 

確切地知道動畫時長，只檢查元素，並發現它的風格標籤。

方法2：使用animationend事件：

delete() { 
    this.animator.setType('rollOut').show(this.myElem.nativeElement); 
    this.myElem.nativeElement.addEventListener('animationend',()=>{ 
     this.tasks = this.tasks.filter(
     (data) => data.taskId != id 
     ) 
    })  
}) 

看到這個answer瞭解更多

Answer 2

行，所以我想通了。

它實際上返回一個承諾，所以我可以做的事情，在承諾塊，因爲我已經爲

popover.onDidDismiss((popoverData) => { 
    this.animator.setType('rollOut').show(this.myElem.nativeElement).then(
     () => this.tasks = this.tasks.filter(
        (data) => data.taskId != popoverData 
       ) 
     ); 
    })