我刚刚开始用Angular JS做我的web应用。
我有一个使用<div ng-repeat="item in items">...</div>
渲染的对象列表。$scope.items
列表是使用ajax调用服务器填充的。
我的模块被注入了如下的ngAnimate
var myApp = angular.module('myModule',['ngAnimate','infinite-scroll']);
用户可以选择添加/删除项目。当用户添加/删除项目时,我希望相应的模型分别淡入/淡出。我已经按照这个链接实现了上面提到的效果。然而,在页面加载中,项目中的所有模型都会淡入,而不仅仅是在使用$scope.items.push({item-x:item-value})
添加新项目时。我希望只对新添加的项目生效。
同样,当滚动(无限滚动)将新项目推入列表时,这些项目再次淡出。
这可以在html元素上使用ng-class
指令来实现吗?
对实现这一目标的任何帮助将不胜感激。由于
您可以使用$animate.enabled(/* boolean */)
全局禁用动画。所以,如果你想在初始加载项目时暂时关闭动画,你可以这样做:
$http.get('example.json').then(function(result){
// disable animation
$animate.enabled(false);
$scope.itemslist = result.data
// don't enable again until after browser renders
$timeout(function(){ $animate.enabled(true); });
});
演示请注意,$timeout
是重新启用所必需的(并且必须注入到控制器中),以便使其工作。
你可以用同样的方法来使用nginfinitesroll——只要你愿意就把它关掉。只要确保在你想要禁用动画的事件完成后重新打开它。