angularJS一个接一个的动画

Question

我正在使用angularJS（没有jQuery）来制作分页动画效果，也就是当用户询问下一页的记录时，表中的当前表行向右滑出，以及包含要求的表行记录会从右侧滑入。

  <tbody>
    <tr ng-repeat="userInfo in data.entries" class="row-animate">
        <th ng-bind="userInfo.email"></th>
        <th ng-bind="userInfo.role"></th>
        <th ng-bind="userInfo.createdAt"></th>
    </tr>
</tbody>

动画效果是使用.row-animate完成的，css看起来像这样：

.row-animate.ng-enter {
    .animate(1s, fadeInRight);
}
.row-animate.ng-leave {
    .animate(1s, fadeOutRight);
}

问题是，当用户点击下一页时，旧记录的滑动动画和新记录的动画中的滑动同时发生，这使得视图有点凌乱......有没有办法让旧的记录首先滑出，旧的记录完全消失后，新记录会滑入？