1

我的网页上有一个显示最新项目的元素。每隔几秒钟，我就会在 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 一起使用（或任何其他方式）。

感谢您的任何帮助，您可以提供！

4

0 回答 0