javascript - Angular 中的动画 orderBy 列表值

Question

我找到了一些关于在 Angular 中对列表进行动画处理的很酷的答案: How can I animate sorting a list with orderBy using ng-repeat with ng-animate?

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

HTML:

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

JS:

//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;
  }

CSS:

#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; }

这是一个有效的 jsBin: http://jsbin.com/cebibejoho/1/

我似乎无法让动画始终如一地工作。排序时，一些行只是跳到位而不是动画。我认为这与更新 player.order 值以及该行的样式在 HTML 中发生变化有关。发生这种情况时它不会应用 CSS 转换，但我不明白为什么不这样做。

Answer 1

看看，angular ng-repeat 做了什么，

1. html 节点根据 ng-repeat 中使用的对象的变化被覆盖。这意味着，dom 树中元素的顺序本身发生了变化。

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

3. 因此，为了使其成为动画效果，请不要在单击时对对象(在您的情况下为 division)进行排序。而不是让它四处移动，因为您需要创建自己的指令来定义列表的动画。

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