动画元素在列表之间移动

Question

使用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> 

添加项目的功能执行简单推送

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

你可以see this in action (with no animation) at this Plunker

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

注意：我在业务逻辑和动画方面的确切情况有点不同，但我希望解决方案足够灵活，允许对菜单中发生的事情进行一些更改/添加，在＆期间＃34;移动＆＃34;动画，以及目标列表中发生的事情。

Answer 1

演示http://plnkr.co/edit/XYnf7U?p=preview

1. 我删除了列表样式以确保移动时列表项的正确位置。如果必须启用列表样式，则必须考虑这一点。
2. 该演示的工作原理是：当用户添加项目时，它会获取原始项目和最终项目的位置，并将jquery动画应用于这两个位置之间的克隆列表项目。
3. 使用$event.target识别原始项目。