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效果 怎么做 一些身体帮助..请
答案 0 :(得分:0)
您需要包含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);
};
});
&#13;
/* 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;
}
&#13;
<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>
&#13;