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

请参阅角度ng-repeat做什么，

根据ng-repeat中使用的对象的变化覆盖html节点。这意味着，dom树中元素的顺序本身就会改变。
动画不应该在内部改变元素的顺序，而只是改变元素的位置。
因此，为了使其成为动画效果，请不要在点击时对对象（在您的情况下为division）进行排序。而是让它四处移动，因为你需要创建自己的指令来定义列表的动画。

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

动画orderBy在Angular中列出值

1 个答案: