web-dev-qa-db-fra.com

comment utiliser l'animation avec ng-repeat dans angularjs

J'ai une liste sur laquelle j'itère en utilisant ng-repeat: et l'utilisateur peut interagir avec les éléments de la liste en utilisant les icônes de flèche vers le haut et vers le bas et en cliquant dessus, je change simplement l'ordre de l'élément dans la "liste" "c'est ce que angular suggère de changer le modèle et les changements se reflètent automatiquement dans la vue.

<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>

Logique dans moveUp: -

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

le code ci-dessus fonctionne parfaitement et la logique de déplacement de l'élément vers le bas est similaire. Mais le problème que je veux résoudre est de savoir comment mettre une animation? Je sais angular s'occupe de la liaison de la vue et du modèle par lui-même, mais existe-t-il un moyen de mettre en animation lorsque la vue est mise à jour en appuyant sur les icônes de flèche vers le bas?

javascriptangularjsjquery-animateangularjs-ng-repeat
32
Rishul Matta

Suite au commentaire de Marcel: dans AngularJS 1.2, vous n'avez pas besoin d'utiliser le ng-animate directive. Au lieu:

  1. Comprendreangular-animate[-min].js.
  2. Faites dépendre votre module de ngAnimate.
  3. Définissez vos transitions en CSS à l'aide de classes comme .ng-enter et .ng-enter-active .
  4. Utilisation ng-repeat comme vous le feriez normalement.

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;
}

Démo dans (quelqu'un d'autre) Plunker .

Voir docs for $ animate pour plus de détails sur la progression à travers les différentes classes CSS.

52
z0r

Vérifiez ce lien http://www.nganimate.org/

  1. Vous devez déclarer l'attribut ng-animate à un élément qui a une autre directive qui change le DOM

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

  2. Vous devez ajouter des transitions ou des animations CSS.

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

Vous pouvez vérifier l'exemple de plnkr ici: http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM

6
Rokas

En complément de la dernière réponse, il existe la classe ng-move pour les animations lorsque l'ordre est modifié:

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

Dernier documentation ici .

4
clopez

Si vous ne souhaitez pas utiliser le module "ngAnimate" en raison de la réduction du nombre de plugins, vous pouvez archiver l'effet de transition simple en utilisant ng-init et des directives personnalisées.

<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);
    };
});

En toi contrôleur

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