Angular 2排序列表動畫
[英]Angular 2 Sort List Animations
問題描述
我會發布代碼，但我真的不知道從哪里開始。 我已經閱讀了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，這是否可能？
2 個解決方案
解決方案1
0 2018-03-02 13:52:29
可以做到的，想法是隨時渲染所有元素。 相反，我們只是根據其順序更改每個元素的屬性，因此它將觸發動畫。
我只是做了一個非常簡單的演示這個想法。
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
0 2018-03-02 15:24:33
上面的答案是關於水平放置的元素，但是您可以使用這種想法並將其用於垂直元素，方法如下：
- 使所有項目div位置：絕對高度相同。 使用ngStyle將父div高度設置為元素高度的總和。
為每個項目div在CSS中設置轉換。
根據索引設置每個元素的頂部
在排序時，重新計算每個項目的頂部（我認為您可以向數組項目添加其他屬性，並使用ngStyle
因此，項目最高價值的變化應受到過渡的影響。
ps你也可以使用翻譯轉換
角度動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.