AngularJS: move animations.

by koper

HTML

<body ng-app ng-controller="BlocksCtrl">
    <button ng-click="randomize()">Shuffle</button>
    <div class="blocks">
        <div ng-repeat="block in blocks" class="block" ng-style="{'background-color': block, 'left': ($index * 40) + 'px'}"></div>
    </div>
</body>

CSS

.blocks {
    position: relative;
}
.block {
    position: absolute;
    width: 30px;
    height: 30px;
}

JavaScript

function BlocksCtrl($scope) {
    $scope.blocks = ['green', 'yellow', 'red', 'blue', 'orange'];
    $scope.randomize = function() {
        shuffle($scope.blocks);
    };

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/array/shuffle [v1.0]
    function shuffle(o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};
}