Angular 2排序列表动画

我想张贴代码，但我真的不知道从哪里开始。我已经通读了https://angular.io/docs/ts/latest/guide/animations.html动画指南，但它不符合我的要求。

那么，假设您有一个使用*ngFor显示的项目列表，并且在列表的顶部包含排序按钮。例如，默认排序是'Name'。它将在初始屏幕上显示如下

Sort By: Name | Value
[name: a, value:3]
[name: b, value:2]
[name: c, value:1]

然后假设用户按'Value'按值排序。

Sort By: Name | Value
[name: c, value:1]
[name: b, value:2]
[name: a, value:3]

我知道我可以简单地排序绑定到视图组件的列表，但我想要动画。在当前的Angular 2动画API下，这可能吗?

这是可以做到的，我们的想法是在任何时候都呈现所有元素。相反，我们只是根据它们的顺序改变每个元素的属性，因此它将触发动画。

我只是做了一个非常简单的例子来展示这个想法。

angular.module('StackApp', [])
  .controller('MainCtrl', function($scope) {
  'use strict';
  $scope.title = 'List';
  var item1 = { title: "orange", pos: 1 };
  var item2 = { title: "apple", pos: 2 };
  var item3 = { title: "banana", pos: 3 };
  
  $scope.items = [item1, item2, item3];
  
  $scope.sort = function() {
    item1.pos = 2;
    item2.pos = 1;
  }
  
});

ul li {
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}
.pos1 {
  padding-left: 1px;
}
.pos2 {
  padding-left: 20px;
}
.pos3 {
  padding-left: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="StackApp">
  <div ng-controller="MainCtrl">
    <h1>{{ title }}</h1>
    <button ng-click="sort()">Sort</button>
    <ul>
      <li ng-repeat="item in items" ng-class="'pos' + item.pos">{{ item.title }}</li>
    </ul>
  </div>
</body>

上面的答案是关于水平位置的元素，但您可以使用这个想法并以以下方式实现垂直元素:

使所有物品的位置:垂直且高度相同。

在css中为每个itemdiv设置过渡。

根据索引

设置每个元素的顶部

在排序上重新计算每个项目的顶部(我认为你可以添加额外的prop到数组项目，并应用它与ngStyle

因此项目顶部值的变化应该受到过渡的影响。

相关内容

最新更新

热门标签：