Ng-animate: анимация при изменении модели

Я создал таблицу, в которой пользователь может увеличить и уменьшить значение. См. 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;
}

Я хочу сделать анимацию при обновлении модели, то есть столбец таблицы изменит цвет фона От красного до белого, если пользователь изменит значение.

Поэтому, когда вы нажимаете стрелку вверх или стрелку вниз в любом столбце, цвет фона этого столбца таблицы изменяется от красного до белого.

Я не могу обойти его. Любые указатели на то, как достичь этого?

Ответ 1

В вашем коде есть несколько проблем:

НИКОГДА НЕ выполняйте манипуляции с DOM в коде контроллера: $(elem).animate(.. следует избегать. Только в директивах вы можете манипулировать с элементом DOM.
В версиях версии 1.2+ для AngularJS вам необходимо ссылаться на модуль ngAnimate.
Лучше делать анимации CSS3 с резервными анимациями на основе js.

Я предлагаю написать директиву, которая будет отслеживать изменения и добавлять класс, который будет запускать анимацию, а затем удалить ее:

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

Рабочий пример: http://plnkr.co/edit/zs495osfSnWSvWBIn3rh?p=preview

Ответ 2

Это можно решить с помощью простой директивы и анимации CSS3.

HTML

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

Директива

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

Ответ 3

в Angular 1.5 u можете использовать ngAnimateSwap встроенную директиву.

Из документов:

ngAnimateSwap - ориентированная на анимацию директива, которая позволяет удалять и вводить контейнер, когда соответствующее выражение изменяется. Общей практикой для этой директивы является вращающийся баннер или компонент слайдера, который содержит одно изображение, присутствующее одновременно. Когда активное изображение меняется, старое изображение будет выполнять анимацию отпуска, а новый элемент будет вставлен через анимацию ввода.