Ich würde den Code posten, aber ich weiß wirklich nicht einmal, wo ich anfangen soll. Ich habe den Ссылка Animationsleitfaden gelesen, der jedoch nicht auf meine Anforderung antwortet.
Nehmen wir also an, Sie haben eine Liste von Elementen, die mit *ngFor angezeigt werden und oben in der Liste Sortierschaltflächen enthalten. Beispiel: Die Standardsortierung lautet 'Name'. Es wird so auf dem ersten Bildschirm angezeigt
Nehmen wir an, der Benutzer drückt Wert, um nach Wert zu sortieren.
%Vor%Ich weiß, dass ich die Liste, die gebunden ist, einfach in die Ansichtskomponente sortieren kann, aber animiert werden möchte. Ist das sogar mit der aktuellen Angular 2 Animation API möglich?
Es kann gemacht 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.
Die obige Antwort bezieht sich auf horizontal angeordnete Elemente, aber Sie können die Idee verwenden und sie für vertikale Elemente auf folgende Weise implementieren:
Setze den Übergang in CSS für jedes Element div.
Setze den Anfang jedes Elements entsprechend dem Index
Bei der Sortierung wird der Anfang für jedes Element neu berechnet (ich denke, Sie können dem Array-Element eine zusätzliche Stütze hinzufügen und sie mit ngStyle anwenden
Daher sollte die Änderung der oberen Werte des Elements durch den Übergang beeinflusst werden.
Sie können translate transform auch verwenden
Tags und Links javascript angular