web-dev-qa-db-fra.com

ng-animate avec la directive ng-class

Vous pouvez utiliser ng-animate avec ng-class avec les animations d'ajout et de suppression. Je cherche à faire une animation en CSS3 mais je n'ai pas trouvé de bons exemples avec ng-class en ligne. Je me demandais donc si les gens avaient de bons exemples à partager.

Je ne sais pas à quoi ressemblera mon animation finale, mais pour les besoins de cet exemple, disons que je veux juste augmenter progressivement la hauteur du div lorsque j'ajoute la classe myclass.

 <div ng-class="{{myclass:scopeVar}}" ng-animate="?????"></div>

**CSS**

.myclass.ng-add{??}
.myclass.ng-add-active{??}
.myclass.ng-remove{??}
.myclass.ng-remove-active{??}
cssangularjsanimationng-animateng-class
22
NicolasMoise

Animation d'un ng-class l'ajout ou la suppression à l'aide de la transition CSS comporte 3 étapes. L'ordre de ces étapes est très important, j'ai presque passé une journée à comprendre pourquoi une simple animation ne fonctionnait pas en raison d'une mauvaise compréhension de l'ordre dans lequel les classes sont ajoutées.

Étape 1:

classname-add/classname-remove classe est ajoutée.

Contrairement à ce que quelqu'un pourrait penser, cela est en fait ajouté avant la classe est ajoutée à/supprimée de l'élément.

C'est l'étape où nous devons ajouter la propriété transition  1 ainsi que l'état initial de notre animation.

Étape 2:

classname la classe est ajoutée ou supprimée.

C'est là que vous spécifiez les styles éventuels de l'élément. Cette classe n'a souvent rien à voir avec notre animation. N'oubliez pas que nous animons l'ajout/la suppression de cette classe. Cette classe elle-même ne devrait même pas avoir besoin de savoir qu'une animation se déroule autour d'elle.

Étape 3:

classname-add-active/classname-remove-active classe est ajoutée.

Ceci est ajouté après la classe est ajoutée/supprimée de l'élément.

C'est l'étape où nous devons spécifier l'état final de notre animation.

Pour voir cela en action, créons une animation de fondu d'entrée classique montrée lorsque l'état sélectionné d'un élément change (selected changement de classe à l'aide de ng-class).

angular.module('demo', ['ngAnimate'])
  .controller('demoCtrl', function($scope) {
    $scope.selected = false;
    $scope.selectToggle = function() {
      $scope.selected = !$scope.selected;
    };
  });
.item {
  width: 50px;
  height: 50px;
  background: grey;
}
.item.selected {
  /* this is the actual change to the elment
   *  which has nothing to do with the animation
   */
  background-color: dodgerblue;
}
.item.selected-add,
.item.selected-remove {
  /* Here we specify the transition property and
   * initial state of the animation, which is hidden 
   * state having 0 opacity
   */
  opacity: 0;
  transition: opacity 3s;
}
.item.selected-add-active,
.item.selected-remove-active {
  /* Here we specify the final state of the animation,
   * which is visible having 1 opacity
   */
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
  <div class="item" ng-class="{selected:selected}"></div>
  <br>
  <br>
  <button ng-click="selectToggle();">
    {{selected? 'Unselect' : 'Select'}}
  </button>
</div>

1 Pourquoi devrais-je spécifier la transition dans le premier état, au lieu de simplement l'ajouter à la classe en cours de basculement ou à un sélecteur statique sur l'élément?, Demandez-vous.

Eh bien pour expliquer cela, supposons que vous ayez besoin d'une animation unidirectionnelle, par exemple une animation de fondu sortant quand un fade-out classe est ajoutée.

Si vous ajoutez la propriété transition sur le fade-out classe elle-même, la transition reste sur l'élément même après l'animation. Ce qui signifie que lorsque votre état final (fade-out-add-active) est supprimé, l'élément va se fondre lentement en arrière , nous obtenons donc un fade -out-fade-in qui n'est pas ce que nous voulions.

27
T J

J'ai trouvé une solution à ce problème, alors j'ai pensé la partager.

http://jsfiddle.net/nicolasmoise/XaL9r/1/

Ce qui est bien avec celui-ci, c'est qu'il ne nécessite que deux classes CSS. Vous pouvez directement insérer la propriété CSS3 transition dans votre classe de base. Contrairement aux autres cas de ng-animate, je crois que toutes les animations sont faites en CSS3 (pas de gâchis avec le DOM comme avec les animations avec ng-include etc ...).

Je tiens à remercier Ilan Frumer pour le lien vers sa réponse. Sa solution était pour l'animation avec ng-show qui est très similaire mais un peu différente des animations avec ng-class. C'est pourquoi j'ai décidé de poster mon exemple.

14
NicolasMoise