AngularJs lazyload淡入效果

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功能 如何做到這一點 一些身體help..please

Answer 1

您需要包括NG-動畫腳本，然後當你創建你的模塊，包括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>