logo标签列表

Angular 2排序列表动画

javascriptangular
9
我会给您提供代码，但我真的不知道从哪里开始。我已经阅读了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]

假设用户按下“Value”以按值排序。

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

我知道可以简单地对绑定到视图组件的列表进行排序，但我想要动画效果。使用当前的 Angular 2 动画 API 是否可能实现这一点？

我有一个类似的问题，不过对我来说，每个移动元素的进入/离开动画都可以。目前，如果您重新排列列表中的项目，它不会触发* => void，我不知道如何对其做出反应。 - Yona Appletree
2个回答
0

这是可以实现的，想法就是始终渲染所有元素。相反，我们只需根据它们的顺序更改每个元素的属性，因此它将触发动画。

我刚刚制作了一些非常简单的示例来展示这个想法。

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>

0
上面的答案是关于水平定位元素的，但您可以使用这个想法并将其实现为垂直元素，方法如下：
1. 将所有项目 div 设置为 position: absolute，并具有相同的高度。使用 ngStyle 设置父 div 的高度为元素高度之和。
2. 在 css 中为每个项目 div 设置过渡效果。
3. 根据索引设置每个元素的顶部位置。
4. 在排序时重新计算每个项目的顶部位置（我认为您可以向数组项添加附加属性，并使用 ngStyle 应用它）。
因此，项目顶部值的更改应受到过渡效果的影响。
附注：您也可以使用 translate transform。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接