Angular 2排序列表动画

我会发布代码，但我真的不知道从哪里开始。我已阅读了动画指南https://angular.io/docs/ts/latest/guide/animations.html，但它不符合我的要求。Angular 2排序列表动画

因此，假设您有一个使用*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甚至有可能吗？

来源

2016-09-26 kc707

我有类似的问题，但对我来说，我可以为每个移动的元素输入/离开动画。实际上，如果您重新排列列表中的项目，它不会触发* => void，我根本看不出如何对它做出反应。 –

@ kc707也许赏金这个问题？ – BenRacicot

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

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

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>

来源

2018-03-02 13:52:29 windmaomao

答案以上就是关于水平放置的元素，但你可以使用的想法，并实现它在这样的方式垂直元素：

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

在CSS中为每个项目div设置转换。

根据索引

在排序重新计算每个项目的顶部（我想你可以添加额外的道具数组项和应用它的每个元素的

机顶盒与ngStyle

所以项目最高价值观的改变应该转变的影响。

诗u可以使用翻译也变换

来源

2018-03-02 15:24:33

Angular 2排序列表动画

回答

相关问题