我会发布代码,但我真的不知道从哪里开始。我已经阅读了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 Animation 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>
上面的答案是关于水平定位的元素,但您可以使用这个想法并以这种方式为垂直元素实现它:
为每个项目div设置css转换。
因此,项目最高值更改应受到转换的影响。
你也可以使用translate transform