JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<div ng-app="App" ng-controller="Ctrl">
    <button ng-click="addPerson()">Add Person</button>
    <br/>
        <table>
        <tr ng-repeat="person in people" class="person">
            <td>{{person.first}} {{person.last}}</td>
            <td><button ng-click="personUp($index)" ng-hide="$index === 0">up</button></td>
            <td><button ng-click="personDown($index)" ng-hide="$index === people.length-1">down</button></td>
            <td><button ng-click="personRemove($index)">remove</button></td>
        </tr>
    </table>
</div>

CSS

.person {
    
}

.person.ng-move {
    transition: all 0.5s ease;
    position: relative;
    top: 26px;
}

.person.ng-move.person.ng-move-active {
    top: 0;
}

.person.ng-move + tr {
    transition: all 1s ease;
    position: relative;
    top: -26px;
}

.person.ng-move.person.ng-move-active + tr {
    top: 0;
}

/* From this point, it works */

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

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


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

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

JavaScript

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

app.controller('Ctrl', Ctrl);

function Ctrl($scope, $interval) {
    $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.addPerson = function() {
        $scope.people.push({ 
            first: firstNames[Math.floor(Math.random() * firstNames.length)],
            last: lastNames[Math.floor(Math.random() * lastNames.length)]
        });
    };
    
    $scope.people = [];
    for (i = 0; i < 5; i++) {
        $scope.addPerson();
    };

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

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

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