JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-animate.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="row in rows track by $index" class="animated-row">
        <div class="animated-child">Row content</div>
    </div>
    <button ng-click="addRow()">Add Row</button>
</div>

CSS

.animated-row {
    overflow: hidden;
}
.animated-row .animated-child {
    position: relative;
}
.animated-row .animated-child{
    -webkit-transition: 1s linear all;
    -moz-transition: 1s linear all;
    -ms-transition: 1s linear all;
    -o-transition: 1s linear all;
    transition: 1s linear all;
}
.animated-row.ng-enter .animated-child, .animated-row.ng-leave.ng-leave-active .animated-child {
    opacity:0;
    right:-25%;
}
.animated-row.ng-leave .animated-child, .animated-row.ng-enter.ng-enter-active .animated-child {
    opacity:1;
    right:0%;
}

JavaScript

var myApp = angular.module('myApp', ['ngAnimate']);
function myCtrl($scope) {
    $scope.rows = [];
    $scope.addRow = function(){
        $scope.rows.push($scope.rows.length);
    }
}