JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://zeptojs.com/zepto.js"></script>
<body>
  <div id="wrapper">
    <div class="page" style="background: red">
      <p>Click to demo transition</p>
    </div>
  </div>
</body>

CSS

html, body {
    height: 100%;
}

#wrapper {
    /* allow children to be positioned
     * absolutely relative to this
     */
    position: relative;
    height: 100%;
}

.page {
    height: 100%;
    width: 100%;
    
    /* prevents flicker when starting css transition */
    -webkit-backface-visibility: hidden;
}

JavaScript

function transitionDemo() {
    // get reference to current page
    var $current = $('.page');
    
    // create page
    var $next = $('<div class="page" style="background: cyan">Page 2</div>');
    
    // horizontally align with viewport
    $next.css({
      position: 'absolute',
      top: 0,
      left: (window.innerWidth)+'px',
    });
    
    // insert into wrapper for transition
    $('#wrapper').append($next);
    
    $('#wrapper').anim(
      {translate: (-window.innerWidth)+'px,0'},
      0.3,
      'ease-out',
      function () {
        // remove the page that has been transitioned out
        $current.remove();
    
        // remove the CSS transition
        $('#wrapper').attr('style', '');
    
        // remove the position absoluteness
        $next.css({
          top: '',
          left: '',
          position: ''
        });
    });
}

$(document).on('click', transitionDemo);