angularjs - examples - ng-animate: animación cuando el modelo cambia

ng hide angular 6

Question

He creado una tabla en la que el usuario puede aumentar y disminuir el valor. Ver el Fiddle

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

Quiero hacer una animación cuando el modelo se actualice, es decir, la columna de la tabla cambia de color de fondo De rojo a blanco en caso de que el usuario cambie el valor.

Entonces, al hacer clic en la flecha hacia arriba o hacia abajo en cualquier columna particular, el color de fondo de esa columna de la tabla cambia de rojo a blanco.

No soy capaz de mover mi cabeza alrededor de esto. ¿Algún indicador sobre cómo lograr esto?

Answer 1

Esto se puede resolver con una simple directiva y animaciones CSS3.

HTML

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

Directiva

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

Fiddle

Answer 2

Hay un par de problemas en su código:

1. NUNCA realice manipulaciones de DOM en el código del controlador: $(elem).animate(.. es algo que debe evitar. Solo en directivas puede manipular con el elemento DOM.

2. En las versiones 1.2+ de AngularJS necesita hacer referencia ngAnimate módulo ngAnimate .

3. Es mejor hacer animaciones CSS3 con respaldo a animaciones basadas en js.

Propongo escribir una directiva que haga un seguimiento de los cambios y agregue una clase que active la animación y luego la elimine:

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

Ejemplo de trabajo: http://plnkr.co/edit/zs495osfSnWSvWBIn3rh?p=preview

Answer 3

en Angular 1.5 u puede usar ngAnimateSwap incorporado en la directiva.

De la documentación:

ngAnimateSwap es una directiva orientada a la animación que permite que el contenedor se elimine y se ingrese cada vez que cambie la expresión asociada . Un caso de uso común para esta directiva es un banner giratorio o un componente deslizante que contiene una imagen presente a la vez. Cuando la imagen activa cambia, la imagen anterior realizará una animación de abandono y el nuevo elemento se insertará a través de una animación de ingreso.