ionic 3 angular waiting for animation to complete using animate css library

Question

i have a list which is built using a ion-grid with rows representing the items.

i am using css animate library https://github.com/fabiandev/css-animator to show animation when user deletes the items in the list. the html looks like

<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>

the delete event does:

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

so if i comment the filter part i see the animation. but if i uncomment then i dont as i guess the delete element(array filter) kills it. what should be the way to deal with it

Answer 1

You can not see the animation because the element was removed from the doom. So it can not animate. You should wait the animation end then do the filter. To do it, you have two way:

Method 1: Just set timeout for your filter:

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

To know exactly the animation duration, just inspect element and find it in style tab.

Method 2: Use animationend event:

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

See this answer to know more

Answer 2

ok so i figured out.

it actually returns a promise so i can do the things in the promise block as i have done as

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