Angularjs 设置元素在列表之间移动的动画

使用AngularJS，我想为从一个列表添加到另一个列表的元素设置动画，因为在元素的克隆中，该元素应该显示为从项目菜单在页面中移动，并添加到目标列表

<ul class="list">
  <li ng-click="choose(item)" ng-repeat="item in originItems">{{item.name}}</li>
</ul>
<ul class="list">
  <li ng-repeat="item in targetItems track by $index">{{item.name}}</li>
</ul> 

你可以

我考虑过自定义指令和事件，但实际上没有取得任何进展。指令和/或事件的良好结构是什么，可以实现这种运动动画，使其与尽可能添加到列表的业务分离

注意：我在业务逻辑和动画方面的具体情况有点不同，但我希望解决方案足够灵活，允许在“移动”动画期间对菜单中的内容以及目标列表中的内容进行一些更改/添加。

Demo

我删除了列表样式，以确保移动时列表项的正确位置。如果必须启用列表样式，则必须考虑这一点。

演示的工作原理是：当用户添加一个项目时，它会获得原始项目和最终项目的位置，并将jquery动画应用于这两个位置之间克隆的列表项目

使用

$event.target

标识原始项目

---

我认为事情比仅仅使用动态动画功能复杂得多，所以谢谢！然而，有没有一种不依赖于ID的方法来实现这一点？有什么办法让目标物品“知道”它从哪里来？@MichalCharemza你不必使用物品的ID。您正在使用

$scope.targetItems.push（项目）

将同一项推入另一个数组，因此您可以使用

=

进行检查。在您的示例中，您使用的是ID“#原始列表”。有没有一种方法可以让这更一般一些，不依赖ID。比如说，如果你在一个页面上有多个列表？@MichalCharemza抱歉，我误解了你。我刚刚更新了演示并删除了

extractOriginalItem

函数。我使用

$event.target

来标识原始项目元素。啊。。。在这方面更好。但是控制器必须访问$event。我希望在添加到数组的业务逻辑和动画的“糖”之间有更多的分离，因为我的实际情况会更复杂。

$scope.choose = function(item) {
  $scope.targetItems.push(item);
}