Angularjs 使用CSS3动画，以角度显示列表

我有一个项目列表，每个项目都有一个复选框。我使用CSS3动画（这个特殊的CSS）和Angular来处理这个列表。我已经成功地制作了向列表中添加新元素的动画，但在制作从列表中删除项目的动画时遇到了问题（例如，删除或选中复选框）

这是列表项的外观：

<li ng-class="{'animated fadeInDown' : task.isNew, 'animated fadeOutRight' : delete}" class="list-group-item" ng-repeat="task in tasks | filter:{is_done: false}" ng-mouseover="hovering = true" ng-mouseout="hovering = false">
    <input type="checkbox" ng-model="task.is_done" ng-click="toggleDone(task)">
    <span class="done-{{task.is_done}}" ng-hide="editing" ng-dblclick="editing = true">{{task.name}} </span><a href ng-show="hovering" ng-click="deleteTask(task); delete = true">x</a>
</li>

{{task.name}

---

当我添加一个新任务时，属性task.isNew被设置为true，它将“animated fadeInDown”类设置为list元素。但是，当我单击delete链接时，我希望类是“动画淡出”，并且移除实际上是动画的。但这不会发生，该项目已删除，但不会显示动画。

AngularJS版本？你能在这里复制它吗：这是有效的，因为你实际上并没有从列表中删除一个条目。我的示例不起作用，因为deleteTask（task）函数在项目有机会从列表中设置动画之前将其从范围中删除。