Testing Blocks

testing blocks

by Marcus Baptiste

HTML

<script src="https://code.angularjs.org/1.4.8/angular-animate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<div ng-app="app" ng-controller="appCtrl">
   <div class="block-wrapper">
     <div class="block" ng-repeat="block in blocks">{{ block.text }}</div>
   </div>
   <input type="text" ng-init="numBlocks = 0" ng-model="numBlocks">
   <button ng-click="addBlocks(numBlocks)">Add Blocks</button>
</div>

SCSS

.block-wrapper {
  position: relative;
  width: 100%;
  height: auto
}

.block {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: blue;
  margin: 5px;
}

.block.block-1 {
  height: 100px;  
}

.block.block-2 {
  height: 200px;
}

.block.block-3 {
  height: 300px;
}
.block.ng-enter {
   animation: flipInX 1s;   
}

.block.ng-enter-active {
  
}

JavaScript

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

app.controller('appCtrl', function($scope, $timeout) {
	$scope.blocks = [
  	{ text: 0 },
    { text: 0 }
  ];
  
  $scope.addBlocks = function(numBlocks) {
  	var i = 0;
    var addBlocksSeq = function(count, max) {
    	if (count < max) {
      	$scope.blocks.push({ text: count});
        $timeout(function() {
        	addBlocksSeq(++count, max);        
        }, 100);        
      }
    };    
    
    addBlocksSeq(i, numBlocks);
   	
  };
});