Javascript 如何使用动画制作ng重复项目goTop/goBottom？

我尝试使用Angular来制作动画，如下面的演示。 单击按钮时，项目应向上、向下、向上或向下。 ,

{{li.name}
x
向上的
向下
顶部
底部

添加

“向上”和“向下”的动画是可以的，但单击“顶部”或“底部”时，动画是错误的

---

当我单击“goTop”和“goBottom”时，如何移动已单击的项目？

您应该一个接一个地移动它，而不是设置必须转到顶部/底部的元素。看一看这张照片

---

我使用了递归，并在520ms的短超时（

$timeout

重新加载HTML）后再次调用了相同的

scope.goTop

函数，直到到达列表的顶部。因此，你可以直接调用

scope.goUp

为你做移动工作。

无法得到你的问题，请你澄清我的意思是如何更改ng重复项目的位置？并可以动态显示移动过程。也许你可以看到演示…非常感谢你，这对我帮助很大！！！！！然而，我有另一个问题，我如何控制被点击项目的z-索引，因为你看到项目上升总是落后于其他项目。我已经多次尝试设置z索引，但没有改变。您想对这些项目做什么？它们是显示在其他元素的后面还是前面？单击的项目应该显示在其他元素的前面，无论是向上/向下，现在只有项目向下/底部显示在右侧，但当项目向上/向上时，它显示在其他元素的后面。

 <div ng-controller="animateCtrl">
 <div class="container">
  <ul class="ulFade" id="autoscroll">
    <li ng-repeat="li in lis" class="fade show">
      {{li.name}}
      <button ng-click="removeItem($index)">x</button>
      <button ng-click="upItem($index)" ng-show="$index>0">up</button>
      <button ng-click="downItem($index)" ng-show="$index<lis.length-1">down</button>
      <button ng-click="goTop($index)">Top</button>
      <button ng-click="goBottom($index)">Bottom</button>
    </li>
    <div>
      <input type="text" ng-model="li.name">
      <button ng-click="add()">add</button>
    </div>
  </ul>
</div>