Warum treten in ng-repeat-Listen CSS-Übergänge für unshift() und nicht für shift() auf?

Question

Ich verschiebe einige Elemente auf der Seite mit ng-repeat und CSS-Übergängen. Wenn ich das Datenarray unter Verwendung unshift ändere, geht die Liste schön über. (In meiner Anwendung bin ich Position sowie Opazität übergehen.)

Wenn ich jedoch shift verwenden, um das Array zu aktualisieren, wird das DOM sofort ohne Übergang aktualisiert.

Here's a demo von einem Ansatz, bei dem alles wie erwartet neben den Übergängen funktioniert. Vergleichen Sie das Verhalten bei Verwendung der beiden Schaltflächen.

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

Here's another demo eines alternativen Ansatz, bei dem die Übergänge arbeiten, aber das Array verliert jedes Mal ein Element die Funktion ausgeführt wird.

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

Die Idee ist, dass der Benutzer unbegrenzt durch die Elemente im Array zyklieren kann und die CSS-Übergänge in beiden Richtungen auftreten. Das Problem scheint zu sein, dass AngularJS das DOM in einem Fall aktualisiert, aber nicht in dem anderen, obwohl ich dies bei meinen Tests nicht nachweisen konnte.

Auch, basierend auf einigen lesen ich habe ich versucht mit `track by item.id 'ohne Erfolg. Vielen Dank.

Answer 1

Sehr neugierig.

Ich spiele mit verschiedenen möglichen Lösungen um und eine Sache, fand ich, dass, wenn Sie Ihre Folie ändern bis zu:

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

Es wird das dritte Element animieren. Also könnte es ein Referenzproblem innerhalb von eckigen sein?

Hinweis: In meiner Fiedel habe ich während des Spielens auch Änderungen an Ihrem ng-class und css vorgenommen, aber es funktioniert immer noch genauso mit Ihrer ersten Demo-Geige.

Demo

Answer 2

Ein anderer Weg, es zu tun, anstatt jedes Mal ein neues Objekt zu schaffen, ist Angular des ng-repeat in Trick, es ist ein neues Objekt zu denken.

$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 eine ID-Eigenschaft auf jedes Objekt hinzugefügt, die I inkrementieren, wenn oder unten Schiebetüren oben und dann die ng-repeat durch die ID zu verfolgen:

Demo

Answer 3

Ich glaube, ich verstehe dein Problem.

In Ihrer ersten "fehlerhaften" Demo können Sie sehen, dass wenn Sie "Slide up" drücken, Item One tatsächlich ausgeblendet wird, aber es erscheint am Ende der Seite! Das liegt daran, dass Sie es als letztes Element hinzufügen, und erst dann beginnt es seinen Übergang.

Auf Sliding down wird das Element einfach heruntergedrückt und Sie sehen den Übergang daher intuitiver, nämlich eng mit den ersten drei Elementen gekoppelt, aber eigentlich passiert das Gleiche.

Was mich immer noch verwirrt, ist, warum die Lösung von Asok so funktioniert, wie Sie es erwarten würden. Ich werde bearbeiten, wenn ich an einen Grund denke.