Question

我有一个每5秒钟从服务器获取的项目列表：

$timeout(function fetchList() {

      $scope.images = Image.data();

      $timeout(fetchList, 5000);

    }, 5000);

我将它们显示在文档中：

<img ng-repeat='image in images' ng-src="{{image.filename}}" />

每次超时发生时，我都希望淡出列表中不再存在的项目并淡化新的项目。有可能这样做吗？

Answer 1

以下答案基于AngularJS 1.2.0，与动画方法的1.1.5不同。为简单起见，我还使用了文本列表而不是图像。

首先，动画被提取到单独的模块中，因此您必须加载它：

<script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.0/angular-animate.min.js"></script>

并添加 ngAnimate 作为模块依赖性：

angular.module("app", ["ngAnimate"])

HTML标记：

<body ng-app="app">
  <ul ng-controller="list">
    <li ng-repeat="item in list track by item.id">Item {{item.id}}</li>
  </ul>
</body>

CSS，最重要的部分：

li {
  transition: all 0.5s;
}
li.ng-leave {
  opacity: 1; 
}
li.ng-leave-active {
  opacity: 0;  
}
li.ng-enter {
  opacity: 0;
}
li.ng-enter-active {
  opacity: 1; 
}

Working example.

ng-repeat 提供了三个动画事件：输入，离开和移动。 Enter表示要添加到列表中的唯一元素，保留 - 删除，以及移动，以及移动它。为了对这些中的任何一个进行动画处理，您只需在重复元素 .ng- 事件 （用于动画启动）和 .ng- 事件中添加两个类 -active （动画结束），带有所需的CSS过渡或动画。

进一步阅读：

ngAnimate documentation.
Year of Moo article about AngularJS 1.2.0 animations

玩得开心！

如何为AngularJS中的更改列表设置动画？

1 个答案: