ng-animate :模型更改时的动画

Question

我已经创建了一个表，用户可以在其中增加和减少该值。请参阅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;
}

我想在模型更新时做动画，即表列的背景颜色从红色变为白色，以防用户更改该值。

因此，当您单击任何柱状列中的向上箭头或向下箭头时，该表列的背景颜色将从红色变为白色。

我无法理解这件事。如何实现这一点有什么建议吗？

Answer 1

你的代码中有几个问题：

1. 永远不要在控制器的代码中做DOM操作：$(elem).animate(..是你应该避免的东西。只有在指令中，才能使用DOM元素进行操作。
2. 在1.2+版本的AngularJS中，您需要引用ngAnimate模块。
3. 最好使用回退到基于js的动画的CSS3动画。

我建议编写一个跟踪更改的指令，并添加一个触发动画的类，然后删除它：

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

Answer 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

Answer 3

在Angular 1.5中，你可以使用ngAnimateSwap内置指令。

从文档中：

ngAnimateSwap是一个面向动画的指令，每当关联的表达式更改时，都允许移除和进入容器。此指令的一个常见用例是旋转横幅或滑块组件，该组件一次包含一个图像。当活动图像改变时，旧图像将执行离开动画，而新元素将通过enter动画插入。