Angular 2 Sortieren Liste Animationen

Ich würde den Code veröffentlichen, aber ich weiß wirklich nicht, wo ich anfangen soll. Ich habe den Animationsleitfaden https://angular.io/docs/ts/latest/guide/animations.html durchgelesen, aber er antwortet nicht auf meine Anforderung.Angular 2 Sortieren Liste Animationen

Also, sagen Sie, Sie haben eine Liste von Elementen, die mit *ngFor angezeigt werden und oben auf der Liste enthält Sortierschaltflächen. Beispiel: Die Standardsortierung lautet 'Name'. Es wird so auf dem ersten Bildschirm angezeigt

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

dann sagen wir, dass der Benutzer "Wert" drückt, um nach Wert zu sortieren.

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

Ich weiß, dass ich die Liste, die an die View Component gebunden ist, einfach sortieren kann, aber ich wollte animiert werden. Ist das mit der aktuellen Angular 2 Animation API überhaupt möglich?

Quelle

2016-09-26 kc707

Ich habe ein ähnliches Problem, aber für mich würde ich mit Enter/Leave-Animationen für jedes Element bewegt werden. So, wenn Sie Elemente in der Liste neu anordnen, löst es nicht * => void aus und ich sehe überhaupt nicht, wie ich darauf reagieren soll. –

@ kc707 vielleicht Kopfgeld diese Frage? – BenRacicot

Es kann getan werden, die Idee ist, alle Elemente zu jeder Zeit gerendert zu haben. Stattdessen ändern wir einfach die Attribute jedes Elements basierend auf ihrer Reihenfolge, daher löst es die Animation aus.

Ich habe gerade eine sehr einfache gemacht, um die Idee zu zeigen.

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>

Quelle

2018-03-02 13:52:29 windmaomao

Die Antwort über etwa horizontal Elemente angeordnet, aber man kann die Idee einsetzen und für vertikale Elemente in einer solchen Art und Weise implementieren:

Fabrikat Alle Artikel divs Position: absolut und mit gleicher Höhe. Setze die Eltern-Div-Höhe als Summe der Elementhöhe mit ngStyle.

Übergang in CSS für jedes Element festlegen div.

Set Spitze jeden Element nach dem Index
Auf der Sortierung die oben für jede Position neu zu berechnen (ich glaube, Sie zusätzliche Stütze zu Array-Elemente hinzufügen und anwenden mit ngstyle

So Werte Artikel oben ändern sollte mit Übergang betroffen sein.

Ps u auch

Transformation verwenden übersetzen kann

Quelle

2018-03-02 15:24:33

Angular 2 Sortieren Liste Animationen

Antwort

Verwandte Themen