频道导航

angularjs – 我如何动画排序列表与orderBy使用ng-repeat与ng-animate？

2020-04-24 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了angularjs – 我如何动画排序列表与orderBy使用ng-repeat与ng-animate？，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_403_0@ 我使用ng-repeat使用orderBy过滤器渲染对象列表，如下所示：

< li class =“list-item”ng-repeat =“item in items | orderBy：predicate：reverse”>

我试图ng动画列表的排序变化已经证明令人沮丧，不值得分享。我看到了Yearofmoo示例应用程序here。

不幸的是，这个演示不是我想要实现的。我需要动画一个给定的列表项的X位置，当它被放置在一个新的orderBy定义更改后的顺序。我试图用css转换和绝对定位完成这一点，但是ng-repeat似乎重新创建orderBy上的列表项，使动画成为一个真正的挑战。

>这是可能与ng-repeat | orderBy(有或没有
ng-animate)？
>你能建议一种方法或提供一个例子吗？

所以，即使@Alex奥斯本已经表明一种方式来做你想要的评论，这里是我的尝试：

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属性顶部(ng-style =“{top：…}”)。 AngularJS不重建列表，我们得到一个不错的动画。