Dlaczego występują przejścia CSS dla unshift(), a nie dla shift() na listach powtórzeń ng?

Question

Przenoszę niektóre elementy strony za pomocą ng-repeat i przejść CSS. Jeśli zmienię tablicę danych za pomocą unshift, lista przejdzie ładnie. (W mojej aplikacji zmieniam pozycję, a także nieprzezroczystość.)

Jeśli jednak zaktualizuję tablicę za pomocą shift, DOM zostanie natychmiast zaktualizowany bez żadnego przejścia.

Here's a demo z jednego podejścia, w którym wszystkie działają zgodnie z oczekiwaniami poza przejściami. Porównaj zachowanie przy użyciu dwóch przycisków.

$scope.items.push($scope.items.shift()); 

Here's another demo alternatywnego podejścia, w którym działa się przejścia, ale macierz traci Elementem każdorazowo funkcji uruchomienia.

$scope.items.shift($scope.items.push()); 

Chodzi o to, że użytkownik może przełączać się pomiędzy elementami w macierzy przejścia na czas nieokreślony i CSS występują w obu kierunkach. Wydaje się, że problem polega na tym, że AngularJS aktualizuje DOM w jednym przypadku, ale nie w drugim, chociaż nie byłem w stanie tego wykazać w moich testach.

Ponadto, na podstawie niektórych odczytów próbowałem użyć `track by item.id 'bez powodzenia. Dzięki wielkie.

Answer 1

Bardzo ciekawy.

Grałem około z różnych możliwych rozwiązań i jedno znalazłem jest to, że jeśli zmienisz slajd do:

$scope.slideUp = function() { 
    $scope.items.push(angular.copy($scope.items.shift())); 
}; 

To będzie animować trzecią pozycję. Czy może to być kwestia referencyjna w ramach kanciastych?

Uwaga: W moim skrzypce poniżej, podczas zabawy wprowadziłem również zmiany do twoich ng-class i css, ale nadal działa to samo z twoim pierwszym demo skrzypce.

Demo

Answer 2

Innym sposobem, aby to zrobić, zamiast tworzenia nowego obiektu za każdym razem jest oszukać NG-repeat kątowej za do myślenia, że ​​jest to nowy obiekt.

$scope.inc = 9; 

$scope.slideUp = function() { 
    var item = $scope.items.shift(); 
    item.id = $scope.inc++; 
    $scope.items.push(item); 
}; 

$scope.slideDown = function() { 
    var item = $scope.items.pop(); 
    item.id = $scope.inc++; 
    $scope.items.unshift(item); 
}; 

I dodaje właściwości id do każdego przedmiotu, że zwiększanej podczas przesuwania w górę lub w dół, a następnie ustawić ng powtarzania do szyny przez ID:

Demo

Answer 3

myślę zrozumieć swój problem.

W swojej pierwszej "wadliwej" wersji demonstracyjnej widać, że po naciśnięciu "Przesuń w górę", Item One rzeczywiście zaniknie, ale pojawi się na dole strony! To dlatego, że dodajesz go jako ostatni element i dopiero wtedy zaczyna się jego przejście.

Na Sliding down, element jest po prostu przesunięty w dół, a zatem widzisz przejście bardziej intuicyjnie, a mianowicie sprzężony blisko z pierwszymi trzema elementami, ale tak naprawdę dzieje się to samo.

To, co wciąż mnie zastanawia, to dlaczego rozwiązanie Asoka działa tak, jak byś tego oczekiwał. Będę edytować, gdy pomyślę o jakiejś przyczynie.