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