JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<a href="#/test1">Test1</a> 
<a href="#/test2">Test2</a>
<div ng-app="test">
  <div ng-view ng-animate="{enter:'fadein',leave:'fadeout'}"></div>
</div>

CSS

.fadeout-setup, .fadein-setup {
  -webkit-transition:all 5s;
  transition:all 5s;
  /*position:absolute;*/
}

.fadeout-setup { opacity:1; }
.fadeout-start { opacity:0; }

.fadein-setup { opacity:0; }
.fadein-start { opacity:1; }

JavaScript

app=angular.module("test", []);

app.config(function($routeProvider) {
  $routeProvider
    .when('/test1', {
      template:'<div><div ng-repeat="d in data1">{{d}}</div></div>',
      controller:'test1Ctrl'
    })
    .when('/test2', {
      template:'<div><div ng-repeat="d in data2">{{d}}</div></div>',
      controller:'test2Ctrl'
    })
    .otherwise({redirectTo: '/test1'});
});

function test1Ctrl($scope) {
  $scope.data1=['a', 'b', 'c'];
}

function test2Ctrl($scope) {
  $scope.data2=['d', 'e', 'f'];
}