如何使用ng-repeat和ng-animate来对orderBy的列表进行动画处理？

Question

我正在使用像这样ng-repeat的orderBy过滤器渲染对象列表：

<li class="list-item" ng-repeat="item in items | orderBy:predicate:reverse">

我尝试对列表的排序进行ng动画处理的尝试令人沮丧，因此不值得分享。我在这里看到了Yearofmoo示例应用程序。

不幸的是，这个演示并不是我想要实现的。在orderBy定义更改后，当给定列表项以新顺序放置时，我需要设置其X位置的动画。我试图通过css过渡和绝对定位来实现这一点，但是ng- repeat似乎在orderBy使动画成为真正的挑战时重新创建了列表项。

1. ng-repeat | orderBy（使用或不使用 ng-animate）是否可能？
2. 您可以建议一种方法还是提供示例？

Answer 1

因此，即使@Alex Osborn在注释中显示了一种您可以做的事情，这也是我的尝试：

angular.module('StackApp', []).controller('MainCtrl', function($scope) {

  'use strict';



  $scope.reverse = 'false';



  $scope.myList = [{

    id: 0,

    text: 'HTML5 Boilerplate'

  }, {

    id: 1,

    text: 'AngularJS'

  }, {

    id: 2,

    text: 'Karma'

  }, {

    id: 3,

    text: 'Hello'

  }, {

    id: 4,

    text: 'World'

  }, {

    id: 5,

    text: 'How'

  }, {

    id: 6,

    text: 'Are'

  }, {

    id: 7,

    text: 'You'

  }, {

    id: 8,

    text: '?'

  }, {

    id: 9,

    text: 'I'

  }, {

    id: 10,

    text: 'write'

  }, {

    id: 11,

    text: 'more'

  }, {

    id: 12,

    text: 'to'

  }, {

    id: 13,

    text: 'make'

  }, {

    id: 14,

    text: 'the'

  }, {

    id: 15,

    text: 'list'

  }, {

    id: 16,

    text: 'longer'

  }];



  $scope.$watch('reverse', function() {

    $scope.setOrder();

  });



  $scope.setOrder = function() {



    if ($scope.reverse === 'random') {



      var t = [];



      for (var i = 0; i < $scope.myList.length; i++) {

        var r = Math.floor(Math.random() * $scope.myList.length);

        while (inArray(t, r)) {

          r = Math.floor(Math.random() * $scope.myList.length);

        }

        t.push(r);

        $scope.myList[i].order = r;

      }



    } else {



      for (var i = 0; i < $scope.myList.length; i++) {

        if ($scope.reverse === 'false') {

          $scope.myList[i].order = i;

        } else {

          $scope.myList[i].order = ($scope.myList.length - 1 - i);

        }

      }

    }

  };



  function inArray(a, value) {

    for (var i = 0; i < a.length; i++) {

      if (a[i] === value) {

        return true;

      }

    }

    return false;

  }



});


#list {

  /* Needed, otherwise items would be at top of the page (see below) */

  position: absolute;

  /* full width, or it would look strange */

  width: 100%;

}

#list li {

  position: absolute;

  /* Top: 0; this will be changed for every single list item by AngularJS */

  top: 0;

  /* Item height; hold this in sync with template file */

  height: 40px;

  /*  Simple transition */

  -webkit-transition: top 0.5s ease-in-out;

  -moz-transition: top 0.5s ease-in-out;

  transition: top 0.5s ease-in-out;

}


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app="StackApp">

  <div ng-controller="MainCtrl">

    <h1>Animate Order</h1>

    <form action="">

      <label for="reverse">reverse = true</label>

      <br>

      <input type="radio" value="true" name="reverse" ng-model="reverse">

      <br>

      <br>

      <label for="reverse">reverse = false</label>

      <br>

      <input type="radio" value="false" name="reverse" ng-model="reverse">

      <br>

      <br>

      <label for="reverse">reverse = random (click button below to shuffle again)</label>

      <br>

      <input type="radio" value="random" name="reverse" ng-model="reverse">

    </form>

    <br>

    <br>

    <input type="button" ng-click="reverse = 'random';setOrder()" value="setOrder()">

    <br>

    <br>

    <ul id="list" ng-style="{height: ((myList.length * 40) + 'px')}">

      <li ng-repeat="item in myList" ng-style="{top: ((item.order * 40) + 'px')}">{{$index}} - {{item.order}}. {{item.text}}</li>

    </ul>

  </div>

</div>

因此，AngularJS不会对项目进行排序，但是会更改CSS属性top（ng-style="{top: ...}"）。AngularJS不会重新创建列表，我们得到了一个不错的动画。:)