1

使用 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);
}

你可以在这个 Plunker 看到这个动作（没有动画）

我考虑过自定义指令和事件，但没有真正得到任何地方。什么是一个好的指令和/或事件结构来允许实现这个运动动画，并尽可能地将它与添加到列表的业务分开？

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

4

1 回答 1

3

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

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