Chapter 3: Creating move animations with ngRepeat

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.2/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.3.2/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <div style="repeat-container">
            <input ng-model="search.val" />
            <button ng-click="shuffle()">Shuffle</button>
            <div ng-repeat="el in arr | filter:search.val" 
                 class="animate-container">
                <span>{{ el }}</span>
            </div>
        </div>        
    </div>
</div>

CSS

.animate-container {
    position:relative;
    margin-bottom:-1px;
    width: 300px;
    text-align:center;
    border:1px solid black;
    line-height:40px;
}
.repeat-container {
    position:absolute;
}
.animate-container.ng-move {
    transition:all 1s;
    opacity:0;
    max-height:0;
}
.animate-container.ng-move-active {
    opacity:1;
    max-height:40px;
}
.animate-container.ng-enter {
    transition:left 1.5s, max-height 1s;
    left:-300px;
    max-height:0;
}
.animate-container.ng-enter-active {
    left:0px;
    max-height:40px;
}
.animate-container.ng-leave {
    transition:left 0.5s, max-height 1s;
    left:0px;
    max-height:40px;
}
.animate-container.ng-leave-active {
    left:-300px;
    max-height:0;
}

JavaScript

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
    $scope.arr = [10,15,25,40,45];
    
    // implementation of Knuth in-place shuffle
    function knuthShuffle(a) {
        for(var i = a.length, j, k; i; 
            j = Math.floor(Math.random() * i),
            k = a[--i], 
            a[i] = a[j], 
            a[j] = k);      
        return a;
    };
    
    $scope.shuffle = function() {
        $scope.arr = knuthShuffle($scope.arr);
    };
});