Javascript 使用ng animate更改模型时，如何使模型淡入淡出/淡出？_Javascript_Angularjs_Ng Animate

Javascript 使用ng animate更改模型时，如何使模型淡入淡出/淡出？

javascript angularjs

Javascript 使用ng animate更改模型时，如何使模型淡入淡出/淡出？,javascript,angularjs,ng-animate,Javascript,Angularjs,Ng Animate,我的网页上有一个元素显示了最近的项目。每隔几秒钟，我就会在我的物品数组顶部添加一个新元素，我希望旧物品淡出，新物品淡入问题是我的代码目前没有在新项目中淡出（它正在淡出旧项目），而是将旧项目向下推，我希望旧项目淡出，一旦动画完成，新项目将在同一位置淡入 HTML CSS 我有一个非常简单的版本，我想在这里做：在我的真实应用程序中，“刷新”按钮是一个超时（并且$scope.Refresh中的代码包装在$apply中）我很确定我做得不对，但我不确定如何触发动画事件，或者我会创建一个$scope.

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

问题是我的代码目前没有在新项目中淡出（它正在淡出旧项目），而是将旧项目向下推，我希望旧项目淡出，一旦动画完成，新项目将在同一位置淡入

HTML

CSS

我有一个非常简单的版本，我想在这里做：

在我的真实应用程序中，“刷新”按钮是一个超时（并且$scope.Refresh中的代码包装在$apply中）

我很确定我做得不对，但我不确定如何触发动画事件，或者我会创建一个$scope.item模型，我会用我想显示的项目更新它，但我不确定如何将其与ng animate一起使用（或者其他任何方式）

谢谢你能提供的任何帮助

我会尝试更改项目的样式，以便它们都位于同一行。我的意思是将容器的

显示设置为相对
，将项目的显示设置为绝对。您的小提琴使用的是AngularJS 1.1.5，如果可能，建议使用1.2+，因为动画已经完全重写以使其更简单。@TheSharpieOne谢谢，我升级，现在我有动画工作。对于任何其他需要帮助的人，请查看：这非常有帮助！
<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>

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;
  };

});

@import animate.css