Question

尝试在ng-repeat上设置进入/离开的动画。我遇到的问题是只有第一个元素在输入状态下被动画化。但是，在离开时，所有重复的项目都会正确生成动画。

<div ng-repeat="data in dataset" class="animate-results">
    <a href="#" class="list-group-item" ng-class-odd="'results-odd'" ng-class-even="'results-even'" >
       <h3 ng-class-odd="'results-heading-odd'" ng-class-even="'results-heading-even'" class="list-group-item-heading">{{data.title}}</h3>
       <p class="list-group-item-text" ng-class-odd="'results-heading-odd'" ng-class-even="'results-heading-even'"><b>Completion Date</b>: {{data.completion_date}} / <b>Score</b>: {{data.score}}</p>
    </a>
</div>

CSS：

.results-heading-even {
    color:#333 !important;
}
.results-heading-odd {
    color:#FFF !important;
}

.animate-results.ng-enter, 
.animate-results.ng-leave{
  -webkit-transition:2s linear all;
  transition:2s linear all;
}

.animate-results.ng-enter,
.animate-results.ng-leave.ng-leave-active {
    opacity:0;
}


.animate-results.ng-leave,
.animate-results.ng-enter.ng-enter-active {
    opacity:1;
}

谢谢！

Answer 1

无论出于何种原因，延迟服务器的响应都可以解决问题：

    $timeout(function(){

      $scope.dataset = response;

    },250);

只有ng-repeat中的第一个元素被动画化

1 个答案: