Question

我会发布代码，但我真的不知道从哪里开始。我已经阅读了https://angular.io/docs/ts/latest/guide/animations.html动画指南，但它没有回答我的要求。

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

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

然后让用户按“值”按值排序。

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

我知道我可以简单地对绑定到View Component的列表进行排序，但我希望能够设置动画。这是否可以使用当前的Angular 2 Animation API？

Answer 1

可以做到，这个想法是让所有元素一直呈现。相反，我们只是根据它们的顺序更改每个元素属性，因此它会触发动画。

我只是做了一个非常简单的想法来表达这个想法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

上面的答案是关于水平定位的元素，但你可以使用这个想法并以这种方式为垂直元素实现它：

使所有项目div位置：ansolute并具有相同的高度。使用ngStyle将父div高度设置为元素高度的总和。

为每个项目div设置css转换。

根据索引
在排序时重新计算每个项目的顶部（我认为你可以为数组项添加额外的道具并将其应用于ngStyle

因此，项目最高值的变化应该受到过渡的影响。

你也可以使用翻译变换

Angular 2排序列表动画

2 个答案: