web-dev-qa-db-fra.com

AngularJS 1.2 - ngAnimate ne fonctionne pas

Je suis novice dans l’utilisation de ng-animate avec AngularJS 1.2. Je ne suis pas sûr de savoir pourquoi mon ng-animate ne fonctionne pas avec un certain nom de classe mais fonctionne avec la valeur par défaut pour un simple fondu que j'ai vu dans un exemple. 

Dans cet exemple, j'essaie de définir ma classe ng-animate sur 'animation': http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

mais lorsque j'utilise le paramètre par défaut et que le nom de ma classe pour les animations est juste ".ng-enter" et ".ng-leave", l'animation avec un fondu au fond semble fonctionner correctement. 

http://plnkr.co/edit/lEQhMwd6RWmsdmJbosu0?p=preview

Toute aide serait grandement appréciée, merci!

angularjsangularjs-ng-repeatng-animate
23
changus

L'attribut ng-animate est obsolète en 1.2.

En 1.2, vous définissez les classes CSS appropriées à l'aide d'une convention de dénomination spéciale. Si vous voulez un nom spécifique comme "animation", vous devez ajouter cette classe à l'élément que vous souhaitez animer.

Tant que vous avez les bonnes classes CSS, certaines directives seront automatiquement animées. Lesquels peuvent être trouvés ici: http://docs.angularjs.org/api/ngAnimate

C'est la raison pour laquelle votre animation fonctionne dans votre deuxième exemple lorsque vous définissez simplement la classe ".ng-enter". Cependant, cela animerait automatiquement toutes les directives supportant l'animation enter.

J'ai mis à jour votre premier exemple pour le faire fonctionner avec la classe nommée 'animation': 

HTML:

<li ng-repeat="item in items" class="animation">{{item}}</li>

CSS (conserver les sélecteurs non groupés pour plus de clarté):

.animation {
  -webkit-transition: 1s;
}

.animation.ng-enter {
  opacity: 0;
}

.animation.ng-leave {
  opacity: 1;
}

.animation.ng-enter.ng-enter-active {
  opacity: 1;
}

.animation.ng-leave.ng-leave-active {
  opacity: 0;
}

Plunker:http://plnkr.co/edit/J0qJEMmwdzqXzu733fJf?p=preview

76
tasseKATT

Il est également important de ne pas oublier d'ajouter le module d'animation en tant que dépendance à la définition de votre module. Juste au cas où quelqu'un aurait du mal à faire fonctionner les animations et ne l'aurait pas fait.

angular.module('myApp', ['ngAnimate']);
13
Ben

Vous devez vérifier que la version de votre angular.min.js correspond à celle de angular-animate.min.js.
Le mien a été réparé de cette façon.

9
SANGEET MANGHNANI

Comme Tasse a dit que ng-animate est obsolète, nous devons utiliser la classe . Si vous copiez CSS à partir du site Web d'angularjs http://www.nganimate.org/angularjs/ng-repeat/move then vous devez modifier ces CSS dans un format particulier

Pour plus de détails, vérifiez appliquez Angularjs Animation en 2 minutes

0
Ali Adravi

Ceci s’ajoute à la réponse acceptée, pour ceux qui essaient d’animer un élément avec la directive ng-show. Ce sont des styles qui doivent être utilisés:

.animation.ng-hide-remove {
  transition:2s linear all;
  opacity:0;
}

.animation.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

Veuillez noter que toutes les directives angulaires n'ajoutent pas ng-enter, ng-enter-active, ng-leave and ng-leave-active. Par exemple, la directive ng-show ajoute ng-hide-remove au début de l'animation et ng-hide-remove-active à la fin de celle-ci. Pour plus de détails, suivez ce lien: https://www.w3schools.com/angular/angular_animations.asp

0
Dipendu Paul