JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

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

CSS

.red {
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
}
.blue {
    width: 300px;
    height: 300px;
    background-color: blue;
    position: absolute;
}

JavaScript

angular.module('test', []).
config(function ($routeProvider) {
    $routeProvider.
    when('/test', { template: '<div class="red"></div>' }).
    when('/test2', { template: '<div class="blue"></div>' }).
    otherwise({ redirectTo: '/test' });
}).animation('fade-in', function() {
  return { 
    setup : function(element) {
      element.css({'opacity': 0}); 
    },
    start : function(element, done, memo) {
      element.animate({'opacity': 1}, function() {
        done(); 
      });
    }
  };
}).animation('fade-out', function() {
  return { 
    setup : function(element) {
      element.css({'opacity': 1}); 
    },
    start : function(element, done, memo) {
      element.animate({'opacity': 0}, function() {
        done(); 
      });
    }
  };
});