如何在拼接后触发 ng-move？

Question

我正在使用 ng-animate 并且我有一个通过使用 ng-repeat 迭代的条目列表。当您对特定条目进行选择时，它会消失。我已经适当地定义了 .ng-move, .ng-move-active, .ng-leave, .ng-leave-active，这样当我对我的数据执行 .splice() 操作时，就会出现 .leave 动画，而当我重新排序条目时，就会出现 .move 操作。

但是，我想要的是当删除其中一个条目时，.ng-leave 出现在该条目上，而 .ng-move 将它们全部向上滑动。我发现 .splice() 不会触发 .ng-move，所以我很好奇是否有办法强制在 .splice()?[=25= 之后发生动画]

这里是 html:

<div data-ng-repeat="entry in data" class="container card-drop card-shift">
    <card data="entry"></card>
</div>

这里是 css 类:

.card-drop.ng-leave {
    transition: 0.5s ease-in-out;
    opacity: 1;
}

.card-drop.ng-leave.ng-leave-active {
    transform: scale(0.5);
    opacity: 0;
}

.card-shift.ng-move {
    transition: 0.5s ease-in-out;
}

.card-shift.ng-move.ng-move-active {
    transform: translateY(-284px);
}

而在 javascript 中，我关心的事件只是 $scope.data.splice(index, 1);

编辑：http://plnkr.co/edit/nz38XxPbV4Ycqdn3QYVP?p=preview

以上是我所指问题的原委。请注意，当您单击一个条目并将其拼接时，会出现 .ng-leave 动画，但会出现 ng-move 动画中的 none。

Answer 1

解决方案是没有简单的方法来做到这一点。最终我最终从指令中操纵 DOM 元素的 CSS 以提供滑动动画，然后在拼接的同时将它们瞬间移动到它们的原始位置，从而产生我想要的动画, 尽管是以一种 hacky 的方式。

如何在拼接后触发 ng-move？

How can I trigger ng-move after a splice?

javascript

angularjs

ng-animate