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

Я создал таблицу, в которой пользователь может увеличивать и уменьшать значение. См. скрипку.

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

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

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

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


angularjs ng-animate
person Anand    schedule 18.11.2013    source источник
comment
Пожалуйста, подумайте об использовании новой версии Angular 1.2.1, которая имеет гораздо лучшую систему анимации. Вы найдете замечательный учебник здесь. Для вашей проблемы вы должны запустить анимацию самостоятельно с помощью $animate (и $animate.addClass('change'), например, это, вероятно, лучший выбор, чем $animate.enter() в вашем случае!).   -  person Blackhole    schedule 18.11.2013

Ответы (3)


arrow_upward
55
arrow_downward

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

  1. НИКОГДА не выполняйте манипуляции с DOM в коде контроллера: $(elem).animate(.. этого следует избегать. Только в директивах вы можете манипулировать элементом DOM.

  2. В версиях AngularJS 1.2+ вам необходимо ссылаться на модуль ngAnimate.

  3. Лучше делать анимацию 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

person Valentyn Shybanov    schedule 18.11.2013
comment
Спасибо. Теперь я понимаю, как использовать анимацию, когда DOM-событие нельзя добавить, удалить, скрыть и показать. Я попытался установить модуль angular-animate, но не смог, потому что не было CDN, который давал js anuglar-animate для версии 1.1.5. Они удалили его из новой версии? - person Anand; 19.11.2013
comment
Также, как и ожидалось, angular 1.1.5 не работает с версией angular-animate 1.1.2. - person Anand; 19.11.2013

arrow_upward
17
arrow_downward

Это можно решить с помощью простой директивы и анимации 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;
}

Скрипка

person Clay    schedule 04.05.2015

arrow_upward
9
arrow_downward

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

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

ngAnimateSwap — это директива, ориентированная на анимацию, которая позволяет удалять и вводить контейнер всякий раз, когда изменяется связанное выражение. Распространенным вариантом использования этой директивы является вращающийся баннер или компонент слайдера, который содержит одно изображение, присутствующее в каждый момент времени. При изменении активного изображения старое изображение будет выполнять анимацию выхода, а новый элемент будет вставлен с помощью анимации ввода.

person Netanel Draiman    schedule 17.08.2016