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.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

* {overflow: none;}
.animate-container {
    position:relative;
    margin-bottom:-1px;
    width: 300px;
    text-align:center;
    border:1px solid black;
    line-height:40px;
}
.repeat-container {
    position:absolute;
}

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);
    };
})
.animation('.animate-container', function() {
    return {
        enter: function(element, done) {
            $(element)
            .css({
                'left': '-300px',
                'max-height': '0'
            });
            $(element)
            .animate({
                'max-height': '40px'
            }, 250)
            .animate({
                'left': '0px'
            }, 250, done);
        },
        leave: function(element, done) {
            $(element)
            .css({
                'left': '0px',
                'max-height': '40px'
            });
            $(element)
            .animate({
                'left': '-300px'
            }, 250)
            .animate({
                'max-height': '0'
            }, 250, done);
        },
        move: function(element, done) {
            $(element)
            .css({
                'opacity': '0',
                'max-height': '0'
            });
            $(element)
            .animate({
                'opacity': '1',
                'max-height': '40px'
            }, 500, done);
        }
    };
});