Angular 2 排序列表动画

Posted 2023-02-22

技术标签:

【中文标题】Angular 2 排序列表动画【英文标题】：Angular 2 Sort List Animations 【发布时间】：2017-02-04 08:20:29 【问题描述】：

我会发布代码，但我真的不知道从哪里开始。我已经阅读了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]

我知道我可以简单地对绑定到视图组件的列表进行排序，但我想要动画。使用当前的 Angular 2 动画 API 甚至可以做到这一点吗？

【问题讨论】：

我有一个类似的问题，但对我来说，我可以为每个移动的元素设置进入/离开动画。事实上，如果您对列表中的项目进行重新排序，它不会触发 * => void，我根本不知道如何对它做出反应。 【参考方案1】：

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

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

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>

【讨论】：

【参考方案2】：

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

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

在 css 中为每个项目 div 设置过渡。

根据索引设置每个元素的顶部

在排序时重新计算每个项目的顶部（我认为您可以向数组项目添加额外的道具并使用 ngStyle 应用它

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

你也可以使用翻译转换

【讨论】：

以上是关于Angular 2 排序列表动画的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Angularfire2 Angular2 中对 FirebaseListObservable 列表进行排序？

html Angular 1.4.x中的通用列表排序/关键字：订单列表选择器服务排序