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

Question

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

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

我的模块被注入 ngAnimate 如下

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

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

当新项目被推入滚动列表时（无限滚动），项目再次淡入。

这可以通过在 html 元素上使用 ng-class 指令来实现吗？

对于实现这一目标的任何帮助将不胜感激。 谢谢

Answer 1

您可以使用$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 相同的方法 - 只需随时关闭它即可。只需确保在要为其禁用动画的事件完成后将其重新打开即可。