AngularJS Reader Animation

by codef0rmer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.js"></script>
<div ng-controller="MyCtrl">
    <div class='page page_{{card}}' ng-repeat="card in cards track by $index" ng-show="current == card"></div>
    
    <button ng-click="prev()" ng-disabled="current <= 1">Prev</button>
    <button ng-click="next()" ng-disabled="current >= pages.length">Next</button>
</div>

CSS

.page { width: 100px; height: 100px; background: blue; position: absolute; left: calc(50% - 50px); top: calc(50% - 50px); }
.page_1 { background: blue; }
.page_2 { background: red; }
.page_3 { background: orange; }
.page_4 { background: black; }
.page_5 { background: green; }
.page_6 { background: gray; }
.page_7 { background: violet; }
.page_8 { background: yellow; }
.page_9 { background: pink; }
.page_10 { background: #bada55; }

JavaScript

var myApp = angular.module('myApp',['ngAnimate']);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
    $scope.cards = [1, 2];
    $scope.current = 1;
    
    $scope.prev = function() {
        $scope.current = $scope.current - 1;
        $scope.creatCards();       
    };
    
    $scope.next = function() {
        $scope.current = $scope.current + 1;
        $scope.creatCards();
    };
    
    $scope.creatCards = function() {
        if ($scope.cards.indexOf($scope.current) === -1) {    
            $scope.cards.push($scope.pages[$scope.pages.indexOf($scope.current)]);
        }
        
        $scope.unloadCards();
    };
    
    $scope.unloadCards = function() {
        if ($scope.cards.length > 5) {
            $scope.cards = $scope.cards.slice($scope.cards.length - 1);
        }
    };
}

myApp.animation('.page', function() {
    return {
        enter: function(element, done) {
            element.css({opacity: 0});
            element.animate({opacity: 1}, done);
        },
        removeClass : function(element, className, done) {
          if(className == 'ng-hide') {
              element.css({opacity: 0, visibility: 'hidden'});
              element.css('visibility', 'visible').animate({
                  opacity: 1
              }, done);
          } else {
            done();
          }
        }        
    };
});