AngularJs эффект постепенного исчезновения

Question

app.controller('reviewCtrl',function($scope,$http) {

    $http.get('http://~~~~~~~~~~~~~')
        .success(function(data) {
            $scope.reviewInfoList = data;

            var cnt = 5;
            var ind = 0;
            $scope.reviewInfo = $scope.reviewInfoList.slice(0,cnt);

            $scope.resetList = function(){
                ind = 0
                $scope.reviewInfo = $scope.reviewInfoList.slice(0,cnt);
            };

            $scope.loadMore = function() {

                ind = ind + cnt
                var r = cnt
                if (ind + cnt > $scope.reviewInfoList.length) {
                    r = $scope.reviewInfoList.length - ind
                }
                $scope.reviewInfo = $scope.reviewInfo.concat($scope.reviewInfoList.slice(ind, r + ind))

            }
    });

Этот код используется в моем проекте AngularJS. Я хочу добавить эффект fadeIn в функцию loadmore. Как сделать, чтобы это помогло...

Answer 1

Вам необходимо включить скрипт ng-animate, а затем при создании модуля включить ngAnimate в качестве зависимости. Тогда остальное просто CSS. Взгляните на этот фрагмент, чтобы увидеть его в действии.

angular.module('app', ['ngAnimate']).controller('reviewCtrl', function($scope, $http) {
  $scope.reviewInfoList = [];
  $scope.reviewInfo = [];
  var cnt = 2;
  var ind = 0;

  //for the sake of this demo, generate some dummy data
  for (var i = 0; i < 1000; i++) {
    $scope.reviewInfoList.push(i);
  }

  $scope.loadMore = function() {

      ind = ind + cnt
      var r = cnt
      if (ind + cnt > $scope.reviewInfoList.length) {
        r = $scope.reviewInfoList.length - ind
      }
      $scope.reviewInfo = $scope.reviewInfo.concat($scope.reviewInfoList.slice(ind, r + ind))
    }
    //load the first bit right away
  $scope.reviewInfo = $scope.reviewInfoList.slice(0, cnt);

  $scope.resetList = function() {
    ind = 0
    $scope.reviewInfo = $scope.reviewInfoList.slice(0, cnt);
  };


});

/* The starting CSS styles for the enter animation */

.fade.ng-enter {
  transition: 0.5s linear all;
  opacity: 0;
}
/* The finishing CSS styles for the enter animation */

.fade.ng-enter.ng-enter-active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>

<div ng-app="app" ng-controller="reviewCtrl">
  <button ng-click="loadMore()">Load more</button>
  <ul>
    <li class="fade" ng-repeat="review in reviewInfo">{{review}}</li>
  </ul>
</div>