将CSS3动画与Angular中的列表一起使用

Question

我有一个项目列表，每个项目都有一个复选框。我使用CSS3动画（这个特殊的CSS http://daneden.github.io/animate.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.isNew设置为true，它设置了动画fadeInDown＆＃39; class到list元素。但是，当我点击删除链接时，我希望这个课程是动画fadeOutRight＆＃39;并且删除实际上是动画的。但这并没有发生，项目被删除但没有显示动画。