AngularJs lazyload fadeIn 效果

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。我想在 loadmore 函数中添加 fadeIn 效果怎么做一些 body 帮助..请

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>

AngularJs lazyload fadeIn 效果

AngularJs lazyload fadeIn effect

lazy-loading

fadein

angularjs