Angularjs ng动画：模型更改时的动画

我已经创建了一个表，用户可以在其中增加和减少值。 见

//示例代码，因为它不允许我在没有粘贴代码的情况下推送到JSFIDLE的链接
//css-从角度页开始
.为回车设置动画{
-webkit转换：1s线性所有；/*铬*/
过渡：1s线性全部；
背景颜色：黄色；
}
.animate-enter.animate-enter-active{
背景色：红色；
}

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

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

---

我没办法控制住它。关于如何实现这一点，有什么建议吗？

代码中有几个问题：

永远不要在controller:

$（elem）的代码中进行DOM操作。动画（..

是应该避免的事情。只有在指令中才能使用DOM元素进行操作

在AngularJS的1.2+版本中，您需要参考

ngAnimate

模块

最好使用基于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);});
          });
        }
      });
   };
});

工作示例：

---

这可以通过一个简单的指令和CSS3动画来解决

HTML CSS

在角度1.5U中可以使用内置指令

从文档中：

ngAnimateSwap是一个面向动画的指令，允许在关联表达式更改时删除和输入容器。此指令的常见用例是旋转横幅或滑块组件，其中一次包含一个图像。当活动图像更改时，旧图像将将执行“离开”动画，新元素将通过“回车”动画插入

---

请考虑使用Angular的新版本1.2.1，它有一个更好的动画系统。您会发现一个很棒的教程。对于您的问题，您必须自己触发动画（例如，

$animate.addClass（'change'）

，可能比您的情况下的

$animate.enter（）

更好）。谢谢。我现在明白了，当DOM事件不是添加、删除、隐藏和显示时，如何使用动画。我尝试安装angular animate模块，但无法安装，因为没有CDN为anuglar animate js提供1.1.5版。他们是否已将其从较新版本中删除？正如预期的那样，angular 1.1.5不适用于angular animate版本1.1.2

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

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

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