前端之家收集整理的这篇文章主要介绍了
angularjs – ng-animate：模型更改时的动画，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_
404_0@
我创建了一个表，
用户可以在其中
增加和减少该值。
见
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;
}
我想做模型更新时的动画，即表列的背景颜色从红色更改为白色，以防用户更改值。
因此，当您单击任何perticular列中的向上箭头或向下箭头时，表格列的背景颜色从红色更改为白色。
我不能让我的头围绕它。任何指针如何实现呢？
在你的
代码有几个问题：
>不要在控制器的代码中做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
