web-dev-qa-db-fra.com

Exemple de mouvement angularjs ng-animate?

Je ne semble pas être en mesure de faire fonctionner angularjs ng-animate au travail et il ne semble pas non plus y avoir d'exemples dans la nature. Prenons par exemple le violon de démonstration: http://jsfiddle.net/yfajy/

L'ajout d'instructions de déplacement au CSS comme suit ne crée aucun effet d'animation lors du filtrage de la liste:

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

Quelqu'un peut-il publier un exemple de travail?

animationangularjs
18
user2354397

Je l'ai fait travailler avec un peu de déconner et en utilisant le prochain sélecteur css frère +(violon) . Apparemment, l'animation move est appliquée à tous les éléments entre le premier élément déplacé et l'avant-dernier élément modifié, mais pas au dernier élément modifié.

Vous pouvez voir dans ce violon où j'échange deux personnes à 4 espaces l'une de l'autre que l'animation de déplacement est appliquée aux éléments 0, 1 , 2 et 3 mais pas 4, même si je n'ai échangé que les éléments 0 et 4. Le sélecteur frère suivant remplace les valeurs définies pour les éléments 1, 2 et 3 et est le seul style appliqué à 4.

Dans ce violon vous pouvez vraiment le voir, il y a un bouton qui remplace le 6ème élément par le 3ème et met de nouvelles personnes dedans 1er et 3e. Les 1er et 3e obtiennent l'animation d'entrée tandis que les 4e et 5e reçoivent l'animation de mouvement et la 6e ne reçoit rien, même si la 6e position est la seule avec une personne déplacée.

14
Jason Goemaat

Il y a un très bon article avec un tutoriel sur:

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

11
Julio Garcia

Par documentation :

  • enter - lorsqu'un nouvel élément est ajouté à la liste ou lorsqu'un élément est révélé après un filtre
  • quitter - lorsqu'un élément est supprimé de la liste ou lorsqu'un élément est filtré
  • déplacer - lorsqu'un élément adjacent est filtré, entraînant une réorganisation ou lorsque le contenu de l'élément est réorganisé

Ainsi, le filtrage des éléments à l'intérieur et à l'extérieur ne déclenchera que les animations d'entrée et de sortie, pas l'animation de déplacement.

Pour déclencher l'animation de déplacement, vous devez provoquer un réarrangement des éléments, comme dans cet exemple jsfiddle :

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

Vous pouvez également consulter une explication plus approfondie sur ngAnimate:

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

8
gsklee