以角度方式从列表中删除项目时的动画

Question

给出以下html：

<div class="list-group-item" ng-repeat="sd in dc.sourceDocuments.items">
    <div class="btn-group pull-right" role="group">
        <button type="button" data-toggle="tooltip" title="open" class="btn btn-default"><span class="fa fa-envelope-o"></span></button>
        <button ng-click="dc.markComplete(sd)" type="button" data-toggle="tooltip" title="mark complete" class="btn btn-default"><span class="fa fa-check"></span></button>
    </div>

打字稿方法markComplete会在成功发布后从列表中删除一个项目。

public markComplete(document: SourceDocument): void {
    this.$service
        .markComplete(document.id)
        .then(() => this.remove(document));
}
public remove(document: SourceDocument): void {
    var index = this.sourceDocuments.items.indexOf(document);
    this.sourceDocuments.items.splice(index, 1);
    this.$log.log(`removed document id: ${document.id}`);
}

Angular非常正确并立即从列表中删除该项目。

如何使用角度动画为动画淡出删除动画