我有一个列表是使用离子网格与表示项目的行构建的。离子3角度等待动画完成使用动画CSS库
我使用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
)
})
所以如果我评论过滤部分我看到动画。但如果我取消注释,那么我不会因为我猜删除元素(数组过滤器)杀死它。应该怎样处理它
我正要张贴同样的完成,它返回一个'无极'(** [文档(https://github.com/fabiandev/css-animator#show)**) –
sebaferreras