我创建了一个表,用户可以在其中增加和减少值。
请参阅Fiddle http://jsfiddle.net/AnandVishnu/c5p39/
//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;
}
我想在模型更新时制作动画,即表格列的背景颜色从红色变为白色,以防用户更改值。
因此,当您单击任何特定列中的向上箭头或向下箭头时,该表格列的背景颜色将从红色变为白色。
我无法理解它。有关如何实现这一目标的任何指示?
您的代码中有几个问题:
NEVER在控制器的代码中进行 DOM 操作:$(elem).animate(..
是你应该避免的事情。仅在指令中您可以使用 DOM 元素进行操作。
在 AngularJS 1.2+ 版本中你需要引用ngAnimate
module.
最好使用 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 http://plnkr.co/edit/zs495osfSnWSvWBIn3rh?p=preview
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)