JSFiddle - React, Tailwind, and code Playground

by jonigiuro

HTML

<div id="wrapper">
        <div id="page1" class="page current" style="background-color: #FF9999;">
            <h1>page1</h1>
            <button id="p12">next</button>
        </div>      
        <div id="page2" class="page is-right" style="background-color: #00ff00;">
            <h1>page2</h1>
        </div>
        <!--<div id="page3" class="page" style="background-color: #0000ff;">
            <h1>page3</h1>
        </div>-->
    </div>

CSS

html{
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 100%;
    }

    #wrapper{
         background-color: #000000;
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
    overflow: hidden;
    }

    .page{
        width: 100%;
        height: 100%;
        position: absolute;
    top: 0;
        overflow: hidden;
        backface-visibility: hidden;
    -webkit-transition: left 500ms ease;
    -moz-transition: left 500ms ease;
    -o-transition: left 500ms ease;
    transition: left 500ms ease;
    }

    .current{
        visibility: visible;
        left: 0;
    }

.is-right {
    left: 100% !important;
}

.is-left {
    left: -100% !important;
}

JavaScript

$(document).ready(function(){
        $("#p12").click(function(){

            $("#page1").removeClass('current').addClass("is-left");
            
            //$("#page2").addClass("pt-page-moveFromLeft");
            //$("#page1").removeClass("current");
        });
    });

    $(".page").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
    function() {
        $("#page2").addClass("current").removeClass('is-right');
    });