FORK - move 2 up or down

I finally got the list move animation working!

by jgoemat

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app="App" ng-controller="Ctrl">
    <button ng-click="addPerson()">Add Person</button><br/>
    <button ng-click="addFunky()">Replace 6th with 3rd and put new person in 1st and 3rd</button>
    <br/>
    
        <div ng-repeat="person in people" ng-animate="'person'">
            {{person.first}} {{person.last}} &nbsp;
            <button ng-click="personUp($index)">up</button>
            <button ng-click="personDown($index)">down</button>
            <button ng-click="personRemove($index)">remove</button>
        </div>
</div>

CSS

.person-move {
    position: relative;
    top: 26px;
    color: Red;
    font-style: italic;
}

.person-move.person-move-active {
    transition: all 1.5s ease;
    top: 0;
}

.person-move + div {
    /* cannot have transition on this element */
    /*transition: all 1s ease;*/
    position: relative;
    top: -26px;
    color: blue
}

.person-move.person-move-active + div {
    transition: all 1.5s ease;
    position: relative;
    top: 0;
}

.person-enter {
    position: relative;
    opacity: 0.0;
    height: 0;
    left: 100px;
}

.person-enter.person-enter-active {
    transition: all 0.5s ease;
    opacity: 1.0;
    left: 0;
    height: 26px;
}


.person-leave {
    position: relative;
    opacity: 1.0;
    left: 0;
    height: 26px;
    z-index: -100;
}

.person-leave.person-leave-active {
    transition: all 0.5s ease;
    opacity: 0.0;
    left: 100px;
    height: 0;
    top: -13px;
}

JavaScript

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

function Ctrl($scope) {
    $scope.option = 0;
    
    var firstNames = ['Adam', 'Steve', 'Jessie', 'Frank', 'Kathy', 'Amy', 'Julie', 'Cindy', 'Bob', 'Jeff', 'Sandra'];
    var lastNames = ['Jones', 'Smith', 'Reynolds', 'Quincy', 'Drake', 'Stone', 'Doe', 'Skywalker'];
    
    $scope.createPerson = function() {
        while (true) {
            var person = { 
                first: firstNames[Math.floor(Math.random() * firstNames.length)],
                last: lastNames[Math.floor(Math.random() * lastNames.length)]
            };
            var found = false;
            for (i = 0; i < $scope.people.length; i++) {
                if ($scope.people[i].first == person.first && $scope.people[i].last == person.last) {
                    found = true;
                    break;
                }
            }
            if (!found)
                return person;
        };
    };
    
    $scope.addPerson = function() {
        $scope.people.push($scope.createPerson());
    };
    
    $scope.people = [];
    for (i = 0; i < 10; i++) {
        $scope.addPerson();
    };
    
    $scope.addFunky = function() {
        $scope.people[5] = $scope.people[2];
        $scope.people[2] = $scope.createPerson();
        $scope.people[0] = $scope.createPerson();
    };

    $scope.personUp = function(index) {
        if (index <= 4 || index >= $scope.people.length)
            return;
        var temp = $scope.people[index];
        $scope.people[index] = $scope.people[index - 5];
        $scope.people[index - 5] = temp;
    };

    $scope.personDown = function(index) {
        if (index < 0 || index >= ($scope.people.length - 5))
            return;
        var temp = $scope.people[index];
        $scope.people[index] = $scope.people[index + 5];
        $scope.people[index + 5] = temp;
    };

    $scope.personRemove = function(index) {
        $scope.people.splice(index, 1);
    };
    
    window.MY_SCOPE = $scope;
}