我创建了一个表,用户可以在其中增加和减少该值。
见 Fiddle
见 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);}); }); } }); }; });