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

How to fade in/fade out a single model when a $scope.items is updated in Angular JS?

本文关键字：items scope Angular JS 更新 淡入 何淡入 模型 单个 淡出      更新时间：2023-09-26

我刚刚开始用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——只要你愿意就把它关掉。只要确保在你想要禁用动画的事件完成后重新打开它。

相关文章：