我创建了一个表,用户可以在其中增加和减少该值。 请参阅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;
}
我希望在模型更新时进行动画,即表格列的背景颜色从红色变为白色,以防用户更改值。
因此,当您在任何特定列中单击向上箭头或向下箭头时,该表列的背景颜色将从红色变为白色。
我无法理解它。有关如何实现这一点的任何指示?
答案 0 :(得分:55)
您的代码中存在以下几个问题:
从不在控制器代码中进行DOM操作:$(elem).animate(..
是您应该避免的。只有在指令中,您才能使用DOM元素进行操作。
在1.2以上版本的AngularJS中,您需要引用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);});
});
}
});
};
});
答案 1 :(得分:17)
这可以通过简单的指令和CSS3动画来解决。
<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;
}
答案 2 :(得分:7)
你可以使用ngAnimateSwap内置指令。
来自文档:
ngAnimateSwap是一个面向动画的指令,允许在相关表达式更改时删除并输入容器。此指令的常见用例是旋转横幅或滑块组件,其中包含一次存在的一个图像。当活动图像发生变化时,旧图像将执行离开动画,新元素将通过输入动画插入。