Angularjs ng-animate move example?

Question

Nie wydaje mi się, żebym był w stanie uzyskać angulary ng-animate w drodze do pracy, a także nie wydaje się, żeby istniały jakieś przykłady na wolności. Weźmy na przykład skrzypce Demo: http://jsfiddle.net/yfajy/

Dodawanie instrukcji przejść do css jak następuje nie tworzy żadnego efektu animacji podczas filtrowania listy:

.example-repeat-move-setup { opacity:1; 
    color:red } 
.example-repeat-move-setup.example-repeat-move-start { opacity:1; 
    color:black;} 

Może ktoś dodaj przykład działa?

Answer 1

Jest to bardzo dobry artykuł z tutorialu pod adresem:

http://www.yearofmoo.com/2013/04/animation-in-angularjs.html

Answer 2

Per na documentation:

• enter - gdy nowy element jest dodawany do listy lub gdy przedmiot jest ujawnione po usunięciu filtru - gdy element zostanie usunięty z listy lub gdy element zostanie odfiltrowany
• ruch - kiedy sąsiedni element jest odfiltrowane powodując zamówić urządzenia lub gdy zawartość pozycji są kolejność

Więc filtrowanie pozycje i obecnie wywoła tylko wejść i zostawić animacji, a nie animację ruchu.

Aby uruchomić animację przenieść, trzeba spowodować zamówić urządzenia z pozycji, jak w tym jsfiddle example:

$scope.shuffle = function() { 
    $scope.friends = _($scope.friends).shuffle(); 
} 

Można też chce sprawdzić się więcej wyjaśnień w pogłębionych na ngAnimate:

http://gsklee.im/post/50254705713/nganimate-your-angularjs-apps-with-css3-and-jquery

Answer 3

Zrobiłem to działając z jakimś kłamstwem i używając następnego sela rodzeństwa selektora +(fiddle). Podobno animacja move jest stosowana do wszystkich elementów między pierwszym przesuniętym elementem a następnym, ostatnio zmienionym elementem, ale nie do ostatnio zmienionego elementu.

Możesz zobaczyć w this fiddle, gdzie zamieniam dwie osoby w odstępie 4 spacji, że animacja ruchu jest stosowana do elementów 0, 1, 2 i 3, ale nie 4, mimo że wymieniłem tylko elementy 0 i 4. Następny selektor rodzeństwa zastępuje wartości ustawione dla elementów 1, 2 i 3 i jest jedynym stylem zastosowanym do 4.

W rzeczywistości można go zobaczyć, jest przycisk, który zastępuje szósty element trzecim i umieszcza nowe osoby w 1. i 3.. Pierwsza i trzecia otrzymają animację wchodzenia, podczas gdy 4 i 5 otrzymają animację ruchu, a szósta otrzyma nic, mimo że szósta pozycja jest jedyną z przeniesioną osobą.