在Angular JS中更新$ scope.items时,如何淡入/淡出单个模型?

我刚开始使用Angular JS作为我的Web应用程序 .

我有一个使用 <div ng-repeat="item in items">...</div> 呈现的对象列表 . 使用对服务器的ajax调用填充 $scope.items 列表 .

我的模块注入了ngAnimate,如下所示

var myApp = angular.module('myModule',['ngAnimate','infinite-scroll']);

用户可以选择添加/删除项目 . 当用户添加/删除项目时,我希望相应的模型分别淡入/淡出 . 我已经按照this link来实现上面提到的效果 . 但是,在页面加载时,项目中的所有模型都会淡入,而不仅仅是在使用 $scope.items.push({item-x:item-value}) 添加新项目时 . 我希望淡入效果仅适用于新添加的项目 .

此外,当在滚动(无限滚动)时将新项目推送到列表时,项目再次淡入 .

这可以使用html元素上的 ng-class 指令来实现吗?

任何帮助实现这一点将不胜感激 . 谢谢

回答(1)

2 years ago

您可以使用 $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); });
});

Demo

请注意, $timeout 是重新启用(并且必须注入控制器)所必需的,以便使其正常工作 .

你可以使用相同的方法与ngInfiniteScroll一起使用 - 只要你愿意就把它关掉 . 只需确保在完成要禁用动画的事件后再将其重新打开 .