JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div ng-app="plunker">
    <div ng-controller="MainCtrl">
        <br />
        <div my-view></div>
    </div>
</div>

CSS

/* Put your css in here */
div {
  width: 100%;
}

@-webkit-keyframes in {
  from { -webkit-transform: translateX(-100%); }
  to { -webkit-transform: translateX(0%); }
} 
@-webkit-keyframes out {
  from { -webkit-transform: translateX(0%); }
  to { -webkit-transform: translateX(100%); }
}
  
.in {
  -webkit-animation: "in" 0.5s;
  position: absolute;
}
.out {
  -webkit-animation: "out" 0.5s;
  position: absolute;
}

JavaScript

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

app.config(function($routeProvider) {
  $routeProvider.when('/one', {
    controller: Ctrl1,
    template: '<div class="one"><input ng-model="message"><br />{{message}}<br /><a href="#/two">Go to two</a></div>'
  }).when('/two', {
    controller: Ctrl2,
    template: '<div class="two"><input ng-model="message"><br />{{message}}<br /><a href="#/one">Go to one</a></div>'
  }).otherwise({
    redirectTo: '/one'
  });
})

function Ctrl1($scope) {
  $scope.message="one!";
}
function Ctrl2($scope) {
  $scope.message="two!";
}

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

var PAGE_WIDTH=320;

app.directive('myView', function($http, $templateCache, $route, $anchorScroll, $compile, $controller) {
  return {
    restrict: 'ECA',
    terminal: true,
    link: function(scope, parentElm, attr) {
      var lastScope, lastElement, newScope, newElement;

      scope.$on('$routeChangeSuccess', update);
      update();
      function update() {
        var locals = $route.current && $route.current.locals,
            template = locals && locals.$template;

        if (template) {
          function addNew() {
            var controller;
            newElement = angular.element(template);
            newScope = $route.current.scope = scope.$new();
            if ($route.current.controller) {
              locals.$scope = newScope;
              controller = $controller($route.current.controller, locals);
              newElement.contents().data('$ngControllerController', controller);
            }
            $compile(newElement.contents())(newScope);
            parentElm.append(newElement);
            newScope.$emit('$viewContentLoaded');
          }
          
          function destroyPrevious() {
            lastScope && lastScope.$destroy();
            lastElement && lastElement.remove();
            lastScope = newScope;
            lastElement = newElement;
          }
          
          addNew();
...