JSFiddle - React, Tailwind, and code Playground

by MartĂ­n Acosta

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.1.21/mithril.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.ui.min.js"></script>
<div id="pt-main" class="pt-perspective">
</div>

CSS

.pt-perspective {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1200px;
    transform-style: preserve-3d;
}
 
.pt-page {
    text-align: center;
    width: 50%;
    height: 100%;
    position: absolute;
    visibility: hidden;
    overflow: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}
 
.pt-page-current {
    visibility: visible;
}

.pt-page-ontop {
    z-index: 999;
    visibility: visible;
}

#page-one {
    background: #3cb462;
}

#page-two {
    background: #6465cb;
}

.text {
    margin-top: 44px;
}

JavaScript

function addClass(el, className) {
  if (el.classList)
    el.classList.add(className);
  else
    el.className += ' ' + className;
}

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className);
  else
    el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}

function extend(m, e){
    var e = e || this;
    for (var x in m) e[x] = m[x];
    return e;
}

var lastPage;

/** transition work **/
var transition = function (element, isInitialized, context) {

      context.onunload = function() {
         // this is never reached
         lastPage = element.cloneNode(true);
      }
      if (!isInitialized) {
        if (lastPage) {
          element.parentNode.insertBefore(lastPage, element);
          Velocity(lastPage, "transition.perspectiveLeftOut",  {
              complete: function(elements) { 
                elements[0].remove();
                lastPage = undefined;
              }
          });
        }
        element.style.opacity = 0;
        addClass(element, 'pt-page-ontop');
        Velocity(element, "transition.perspectiveRightIn", { 
            complete: function(elements) {
              addClass(element, 'pt-page-current');
              removeClass(element, 'pt-page-ontop');
            }
        });
      }
};
/* end transition */

var app = {};
app.choose = function(key, options) {
    var option = options[key];
    return option[0](option[1]);
};
app.controller = function() {
  this.currentPage = m.prop("pageOne");
  this.pageOne = new page.one.controller(this);
  this.pageTwo = new page.two.controller(this);
};
app.view = function(ctrl) {
  return [app.choose(ctrl.currentPage(),  {
        "pageOne": [page.one.view, ctrl.pageOne],
        "pageTwo": [page.two.view, ctrl.pageTwo]
      })
  ];
};

var page = {};
page.one = {};
page.one.events = function (ctrl) {
  return {
    onclick: function (e) {
     ...