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

要准确了解动画持续时间，只需检查元素并在样式选项卡中找到它。

方法二：使用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
                )
       );
    })