JSFiddle - React, Tailwind, and code Playground

by tommyAwesome

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
.out, .in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 650ms;
}
.slide.out {
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
}

.slide.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
}

  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>

<script>
function loadBody(target, gotoURL)
{
    $('#' + target).addClass('slide out');
    $('#' + target).load(gotoURL, function (response)
    {
        iniScroll('scrollBody', 'bodyScrollContainer');
    });
    $('#' + target).addClass('slide in');
    $('#' + target).removeSlideClass();
};

function removeSlideClass()
{
    $('#bodyContent').removeClass('slide in');
    $('#bodyContent').removeClass('slide out');
};
    
    loadBody('.red');

</script>

</body>
</html>