Wie benutze ich Animation mit ng-repeat in angularjs

Question

Ich habe eine Liste, die ich überspringe mit ng-repeat: und der Benutzer kann mit den Listenelementen interagieren mit Hilfe von Pfeil nach oben und Pfeil nach unten und beim Klicken auf Ich ändere einfach die Reihenfolge des Elements in der "Liste". Dies ist, was Winkel schlägt das Modell ändern und die Änderungen spiegeln sich automatisch in der Ansicht.

<div ng-repeat="item in list"> 
{{item.name}} 
<div class="icon-up-arrow" ng-click="moveUp($index);"></div> 
<div class="icon-down-arrow" ng-click="moveDown($index);"></div> 
</div> 

Logic in moveUp: -

$scope.moveUp= function(position){ 
var temp=list[position-1]; 
list[position-1]=list[position]; 
list[position=temp]; 
}; 

der obige Code funktioniert völlig in Ordnung und ähnlich ist die Logik für sich die Artikel verschieben. Aber das Problem, das ich lösen möchte, ist, wie setze ich Animation? Ich weiß eckig kümmert sich um bindende Ansicht und Modell selbst, aber gibt es irgendeine Möglichkeit, in Animation zu setzen, wie die Ansicht aktualisiert wird, wenn man einen Pfeil nach unten drückt?

Answer 1

Im Anschluss an Marcel Kommentar: in AngularJS 1.2 Sie brauchen nicht die ng-animate Richtlinie zu verwenden. Stattdessen:

1. Include angular-animate[-min].js.
2. Machen Sie Ihr Modul abhängig von ngAnimate.
3. Definieren Sie Ihre Übergänge in CSS mit classes like .ng-enter and .ng-enter-active.
4. Verwenden Sie wie gewohnt ng-repeat.

HTML:

<div ng-app="foo"> 
    <!-- Set up controllers etc, and then: --> 
    <ul> 
     <li ng-repeat="item in items">{{item}}</li> 
    </ul> 

JavaScript:

angular.module('foo', ['ngAnimate']); 
// controllers not shown 

CSS:

li { 
    opacity: 1; 
} 
li.ng-enter { 
    -webkit-transition: 1s; 
    transition: 1s; 
    opacity: 0; 
} 
li.ng-enter-active { 
    opacity: 1; 
} 

Demo in (someone else's) Plunker.

Weitere Informationen zum Ablauf der verschiedenen CSS-Klassen finden Sie unter docs for $animate.

Answer 2

prüfen Link http://www.nganimate.org/

1. Sie benötigen die ng-belebtes Attribut zu einem Element zu erklären, dass eine andere Richtlinie, die die DOM ändert

   div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" 
   

2. Sie benötigen CSS-Übergänge hinzuzufügen, oder Animation.

   .animate-enter { 
       -webkit-transition: 1s linear all; /* Chrome */ 
       transition: 1s linear all; 
       opacity: 0; 
   } 
   .animate-enter.animate-enter-active { 
       opacity: 1; 
   } 
   

können Sie prüfen, plnkr Beispiel hier: http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM

Answer 3

die letzte Antwort Ergänzend gibt es die ng-move-Klasse für Animationen, wenn Auftrag geändert wird:

li { 
    opacity: 1; 
} 
li.ng-move { 
    -webkit-transition: 1s; 
    transition: 1s; 
    opacity: 0; 
} 
li.ng-move-active { 
    opacity: 1; 
} 

Last documentation here.

Answer 4

Wenn Sie das Modul 'ngAnimate' nicht verwenden möchten, um die Zahl der Plugins zu reduzieren, können Sie den einfachen Übergangseffekt mithilfe von ng-init und benutzerdefinierten Anweisungen archivieren.

<li ng-repeat="item in items" class="item" item-init>{{item.name}}</li> 

.item{ 
    opacity:0; 

    -webkit-transition: all linear 300ms; 
    transition: all linear 300ms; 
} 
.item.visible{ 
    opacity:1; 
} 


myApp.directive('itemInit', function ($compile) { 
    return function (scope, element, attrs) { 
     scope.initItem(element); 
    }; 
}); 

In Sie

$scope.initItem = function(el){ 
    $timeout(function(){ 
     angular.element(el).addClass('visible'); 
    },0); 
}