web-dev-qa-db-fra.com

ng-animate: Animation lorsque le modèle change

J'ai créé une table dans laquelle l'utilisateur peut augmenter et diminuer la valeur. Voir le violon

//sample code as its not allowing me to Push the link to JSFiddle with out pasting code

   <tr ng-repeat="d in dataSource" ng-animate="'animate'">

// css - as from angular page
.animate-enter {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
    background-color:Yellow;
}

.animate-enter.animate-enter-active {
    background-color:Red;
}

Je veux faire de l'animation lorsque le modèle est mis à jour, c'est-à-dire que la colonne du tableau change de couleur d'arrière-plan Du rouge au blanc au cas où l'utilisateur changerait la valeur.

Ainsi, lorsque vous cliquez sur la flèche vers le haut ou vers le bas dans une colonne perticulaire, la couleur d'arrière-plan de cette colonne de tableau passe du rouge au blanc.

Je ne parviens pas à m'en sortir. Avez-vous des conseils sur la façon d'y parvenir?

angularjsng-animate
29
Anand

Il y a quelques problèmes dans votre code:

  1. [~ # ~] jamais [~ # ~] faire des manipulations DOM dans le code du contrôleur: $(elem).animate(.. est quelque chose que vous devez éviter . Ce n'est que dans les directives que vous pouvez manipuler avec l'élément DOM.

  2. Dans les versions 1.2+ d'AngularJS, vous devez référencer le module ngAnimate.

  3. Il est préférable de faire des animations CSS3 avec un retour aux animations basées sur js.

Je propose d'écrire une directive qui suivra les changements et ajoutera une classe qui déclenchera l'animation puis la supprimera:

app.directive('animateOnChange', function($animate,$timeout) {
  return function(scope, elem, attr) {
      scope.$watch(attr.animateOnChange, function(nv,ov) {
        if (nv!=ov) {
          var c = nv > ov?'change-up':'change';
          $animate.addClass(elem,c).then(function() {
            $timeout(function() {$animate.removeClass(elem,c);});
          });
        }
      });
   };
});

Exemple de travail: http://plnkr.co/edit/zs495osfSnWSvWBIn3rh?p=preview

55
Valentyn Shybanov

Cela peut être résolu avec une simple directive et des animations CSS3.

HTML

<span animate-on-change="someValue">{{someValue}}</span>

Directif

myModule.directive('animateOnChange', function($timeout) {
  return function(scope, element, attr) {
    scope.$watch(attr.animateOnChange, function(nv,ov) {
      if (nv!=ov) {
        element.addClass('changed');
        $timeout(function() {
          element.removeClass('changed');
        }, 1000); // Could be enhanced to take duration as a parameter
      }
    });
  };
});

CSS

[animate-on-change] {
  transition: all 1s;
  -webkit-transition: all 1s;
}
[animate-on-change].changed {
  background-color: red;
  transition: none;
  -webkit-transition: none;
}

Violon

17
Clay

in Angular 1.5 u peut utiliser ngAnimateSwap directive intégrée.

De la documentation:

ngAnimateSwap est une directive orientée animation qui permet de supprimer et d'entrer le conteneur chaque fois que l'expression associée change . Un cas d'utilisation courant pour cette directive est une bannière rotative ou un composant curseur qui contient une image présente à la fois. Lorsque l'image active change, l'ancienne image effectuera une animation de sortie et le nouvel élément sera inséré via une animation d'entrée.

9
Nexaddo