Angular 2 Sort List Animations

Zapisałbym kod, ale naprawdę nie wiem nawet, od czego zacząć. Przeczytałem przewodnik po animacji https://angular.io/docs/ts/latest/guide/animations.html, ale nie spełnia on moich wymagań.Angular 2 Sort List Animations

Załóżmy, że masz listę elementów wyświetlanych przy użyciu *ngFor, a na górze listy znajdują się przyciski sortowania. Przykład: domyślny sort to "Nazwa". Pokaże to na początkowym ekranie: następnie powiedz, że użytkownik naciśnie "Wartość", aby sortować według Wartości.

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

wiem, że mogę po prostu uporządkować listę, która jest binded do widoku komponentu, ale chciałem być animowane. Czy jest to możliwe z obecnym interfejsem API Angular 2?

Źródło

2016-09-26 kc707

Mam podobny problem, ale dla mnie byłbym w porządku z animacjami Enter/Leave dla każdego przeniesionego elementu. Tak się składa, że jeśli zmienisz kolejność pozycji na liście, nie spowoduje to, że * => void i nie widzę w ogóle sposobu na reagowanie. –

@ kc707 może bounty to pytanie? – BenRacicot

Można to zrobić, chodzi o to, aby wszystkie elementy były renderowane w dowolnym momencie. Zamiast tego po prostu zmieniamy atrybuty elementów na podstawie ich kolejności, dlatego uruchamia animację.

Po prostu stworzyłem bardzo proste, aby pokazać ten pomysł.

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>

Źródło

2018-03-02 13:52:29 windmaomao

Odpowiedź powyżej około poziomo położony elementów, ale można użyć pomysł i wdrożyć go do pionowych elementów w taki sposób:

dołożenia wszelkich pozycję DIV artykuł: ansolute io tej samej wysokości. Ustaw nadrzędną wysokość div jako sumę wysokości elementów za pomocą ngStyle.

Ustaw przejście w css dla każdego elementu div.

Set top każdego elementu według indeksu
Na sortowania przeliczyć Top dla każdej pozycji (myślę, że można dodać dodatkowe podpory do elementu tablicy i stosować go z ngStyle

Więc pozycja najlepszej wartości zmiany powinny zostać naruszone z przejścia.

Ps u mogą korzystać tłumaczyć przekształcać również

Źródło

2018-03-02 15:24:33

Angular 2 Sort List Animations

Odpowiedz

Powiązane problemy