Javascript 以角度设置orderBy列表值的动画

我找到了一些很酷的答案，可以让列表按角度排序：

但是，这些答案仅按反向/非反向或随机顺序排列数据。我尝试将相同的原则应用于按值排序的数据

HTML:

这是一个正在工作的jsBin：

---

我似乎无法让动画持续工作。排序时，某些行只是跳转到位，而不是设置动画。我认为这与更新player.order值以及HTML中该行的样式更改有关。当这种情况发生时，它没有应用CSS转换，但我不明白为什么不

看，角度ng重复的作用

html节点将根据ng repeat中使用的对象中的更改进行覆盖。这意味着，dom树中元素的顺序本身会发生变化

动画不应该在内部改变元素的顺序，而应该只改变元素的位置

因此，为了使其成为动画效果，不要在单击时对对象进行排序（

division

）。而是让它四处移动，因为您需要创建自己的指令来定义列表的动画

---

通过对对象本身进行排序，将无法对其设置动画。

是否仅在开始时设置动画。i、 在第一次单击时单击。。或者，每次单击时，它都应该设置为新位置的动画。是的，每次用户对列表重新排序时，它都应该设置行到新位置的动画。我希望在我链接到的答案中实现动画，但按特定字段排序。@NaeemShaikh有什么想法吗？但是动画发生在

player.order

编号更新时，这反过来会更新HTML中的“top”

ng样式

（当然CSS转换会进行平滑更改）。那么为什么它理解移动对象，但是CSS转换不起作用呢？因为最初定义了一个可以设置动画的顺序，在代码中它确实可以。对于对象中的后续更改，

ng repeat

对您没有帮助，因为它只会更改创建的

dom

对象，因此它们将与您最初创建的对象不同，因此您将无法为它们设置动画。好的，我想我明白了。我将尝试更改，将信息放入一个新数组中，并从该数组中应用用于重新排序的值，而不是更改原始对象。是。。你明白了。。祝你好运：）不幸的是，我还是不能让它工作。您是否能够编辑我的jsBin示例以显示解决方案？

<div id="division" ng-style="{height: (division.length * 42) + 'px'}">
  <div class="divisionRow" ng-repeat="player in division" ng-style="{top: (player.order * 42) + 'px'}">
    <div>Name: {{player.name}}</div>
    <div>Number: {{player.number}}</div>
    <div>Points: {{player.points}}</div>
  </div>
</div>

//division object
  $scope.division = [
    { name: "Jim", number: 1, points: 10 },
    { name: "Paul", number: 2, points: 19 },
    { name: "Amy", number: 3,points: 3 },
    { name: "Greg", number: 4,points: 6 },
    { name: "Rob", number: 5,points: 20 }
  ];

  //sort order
  $scope.sortBy = function(sortValue){
    if (sortValue == "number") $scope.division.sort(compareNumber);
    if (sortValue == "points") $scope.division.sort(comparePoints);
    angular.forEach($scope.division, function(player, key){ player.order = key; });
  }

  //number compare functions
  function compareNumber(a,b){
    if (a.number < b.number) return -1;
    if (a.number > b.number) return 1;
    return 0;                  
  }

  //points compare function
  function comparePoints(a,b) {
    if (a.points < b.points) return 1;
    if (a.points > b.points) return -1;
    if (a.number < b.number) return -1;
    if (a.number > b.number) return 1;
    return 0;
  }

#division { position: relative; }

.divisionRow {
  position: absolute;
  top: 0;
  height: 42px;
  -webkit-transition: top 0.5s ease-out;
  -moz-transition: top 0.5s ease-out;
  transition: top 0.5s ease-out;}

.divisionRow div { 
  float: left;
  padding: 0 10px; }