JSFiddle - React, Tailwind, and code Playground

by Anatol

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<a href="#/test1">Test1</a> 
<a href="#/test2">Test2</a>
<div ng-app="test" ng-controller="mainCtrl">
  <div aniview></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="d1 in data">{{d1}}</div></div>',
      controller:'test1Ctrl'
    })
    .when('/test2', {
      template:'<div><div ng-repeat="d2 in data">{{d2}}</div></div>',
      controller:'test2Ctrl'
    })
    .otherwise({redirectTo: '/test1'});
});

//This directive adds custom animations to views as they enter or leave a screen
//Note that AngularJS 1.1.4 now has an ng-animate directive but this one can be used when you 
//want complete control or when you can't use that version of AngularJS yet
app.directive('aniview', ['$route', '$anchorScroll', '$compile', '$controller', function ($route, $anchorScroll, $compile, $controller) {
    return {
        restrict: 'ECA',
        terminal: true,
        link: function (scope, element, attr) {
            var lastScope,
                onloadExp = attr.onload || '',
                defaults = { duration: 500, viewEnterAnimation: 'slideLeft', viewExitAnimation: 'fadeOut', slideAmount: 50, disabled: false },
                locals,
                template,
                options = scope.$eval(attr.animations);

            angular.extend(defaults, options);

            scope.$on('$routeChangeSuccess', update);
            update();


            function destroyLastScope() {
                if (lastScope) {
                    lastScope.$destroy();
                    lastScope = null;
                }
            }

            function clearContent() {
                element.html('');
                destroyLastScope();
            }

            function update() {
                locals = $route.current && $route.current.locals;
                template = locals && locals.$template;

                if (template) {
                    if (!defaults.disabled) {
                        if (element.children().length > 0) { //Have content in view
                           ...