动画orderBy Angular中的列表值

I've found some cool answers for animating a list getting ordered in Angular: How can I animate sorting a list with orderBy using ng-repeat with ng-animate?

我已经找到了一些很酷的答案,可以动画一个在Angular中排序的列表:如何使用ng-repeat和ng-animate对orderBy进行动画排序?

However, these answers only order the data by reverse/unreverse or random. I've tried to apply the same principle to order data by the values.

但是,这些答案仅通过反向/反向或随机排序数据。我试图应用相同的原则来按值排序数据。

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

Here's a working jsBin: http://jsbin.com/cebibejoho/1/

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

I can't seem to get the animation working consistently. When sorting, some of the rows just jump into place rather than animate. I think this is something to do with when the player.order value is updated and the style of that row changes in the HTML. It's not applying the CSS transition when that happens but I don't understand why not.

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

1 个解决方案

#1

see, what angular ng-repeat does,

看,角度ng-repeat做了什么,

the html nodes are overwritten according to changes in the object used in ng-repeat. that means, the order of the elements in the dom tree is itself changed.

根据ng-repeat中使用的对象的变化覆盖html节点。这意味着,dom树中元素的顺序本身就会改变。
Animation is something which should not change the order of the elements internally but only change the position of the element.

动画不应该在内部改变元素的顺序,而只是改变元素的位置。
So in-order to make it an animation effect, don't sort the object(division in your case) on click. instead make it move around for that you need to create your own directive for defining the animation for the list.

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

by sorting the object itself, you will not be able to animate it.

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

#1