Question

我的网页上有一个显示最新项目的元素。每隔几秒钟我就会在我的items数组的顶部添加一个新元素，我希望旧项目淡出，新的项目淡入。

问题是我的代码目前在新项目中没有消失（它正在逐渐淡出旧项目）并且正在推倒旧的那个我希望旧的淡出一个并且一旦动画结束了新的一个在同一个地方淡入。

HTML

<body ng-app="testApp">
  <div ng-controller="testCtrl">
    <button type="button" ng-click="refresh()">Refresh</button>
    <div ng-animate="{enter:'animated fadeIn', leave:'animated fadeOut'}" ng-repeat="item in items | limitTo:1">
        {{item}}
    </div>
  </div>
</body>

JS

angular.module('testApp',[]);

angular.module('testApp').controller('testCtrl', function($scope){
  $scope.items = ['item 1', 'item 2', 'item 3'];

  $scope.refresh = function() {
    var newItems = $scope.items.slice(1).concat($scope.items.slice(0,1));
    $scope.items = newItems;
  };

});

CSS

@import animate.css

我有一个非常简化的版本，我想在这里做些什么：http://jsfiddle.net/ErhQB/

在我的真实应用程序中，“刷新”按钮是超时（$ scope.refresh中的代码包含在$ apply中）。

我很确定我做错了但是我不确定如何触发动画事件或者我会创建一个$ scope.item模型，我会用我要显示的项目更新但我不是确定如何使用ng-animate（或任何其他方式）。

感谢您提供的任何帮助！

当使用ng-animate更改模型时，如何获得fadeIn / fadeOut模型？

0 个答案: