JSFiddle - React, Tailwind, and code Playground

by apasaja

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<button id="Page-Transition" class="btn" onClick="loadPreviousPage()"> <-- </button>
<button id="Page-Transition" class="btn" onClick="gotoPage2(0)"> PAGE 1 </button>
<button id="Page-Transition" class="btn" onClick="gotoPage1(1)"> PAGE 2 </button>
<button id="Page-Transition" class="btn" onClick="gotoPage2(2)"> PAGE 3 </button>
<button id="Page-Transition" class="btn" onClick="loadNextPage()"> --> </button>


<div id="pt-main" class="pt-perspective">
<div id="page1" class="pt-page pt-page-1">   
    <p>TEST - PAGE 1 </p>  
</div> 
<div id="page2" class="pt-page pt-page-2">   
    <p>TEST - PAGE 2</p>  
</div> 
<div id="page3" class="pt-page pt-page-3">   
    <p>TEST - PAGE 3</p>  
</div>     
</div>

CSS

/* Page Transition
====================================================================================== */


/* animation sets */

/* move from / to  */



.pt-page-moveFromLeft {
	-webkit-animation: moveFromLeft .6s ease both;
	-moz-animation: moveFromLeft .6s ease both;
	animation: moveFromLeft .6s ease both;
}

.pt-page-moveToRight {
	-webkit-animation: moveToRight .6s ease both;
	-moz-animation: moveToRight .6s ease both;
	animation: moveToRight .6s ease both;
}


/********************************* keyframes **************************************/

/* move from / to  */



@-webkit-keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveFromLeft {
	from { -moz-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
	from { transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight { 
	to { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveToRight { 
	to { -moz-transform: translateX(100%); }
}
@keyframes moveToRight { 
	to { transform: translateX(100%); }
}


/* cube */
.pt-page-rotateCubeLeftOut {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotateCubeLeftOut .6s both ease-in;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotateCubeLeftOut .6s both ease-in;
	transform-origin: 100% 50%;
	animation: rotateCubeLeftOut .6s both ease-in;
}
.pt-page-rotateCubeLeftIn {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotateCubeLeftIn .6s both ease-in;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotateCubeLeftIn .6s both ease-in;
	transform-origin: 0% 50%;
	animation: rotateCubeLeftIn .6s both ease-in;
}
.pt-page-rotateCubeRightOut {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotateCubeRightOut .6s both ease-in;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotateCubeRightOut .6s both ease-in;
	transform-origin: 0% 50%;
	animation: rotateCubeRightOut .6s both ease-in;
}
.pt-page-rotateCubeRightIn {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation:...

JavaScript

var $main = $( '#pt-main' ),
		$pages = $main.children( 'div.pt-page' ),
		$iterate = $( '#Page-Transition' ),
		pagesCount = $pages.length,
		current = 0,
		isAnimating = false,
		endCurrPage = false,
		endNextPage = false,
		animEndEventNames = {
			'WebkitAnimation' : 'webkitAnimationEnd',
			'OAnimation' : 'oAnimationEnd',
			'msAnimation' : 'MSAnimationEnd',
			'animation' : 'animationend'
		},
		// animation end event name
		animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
		// support css animations
		support = Modernizr.cssanimations;
		
		 $pages.each( function() {
			var $page = $( this );
			$page.data( 'originalClassList', $page.attr( 'class' ) );
		} );

		$pages.eq( current ).addClass( 'pt-page-current' );
    
    
    function onEndAnimation( $outpage, $inpage ) {
		endCurrPage = false;
		endNextPage = false;
		resetPage( $outpage, $inpage );
		isAnimating = false;
	}

	function resetPage( $outpage, $inpage ) {
		$outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
		$inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
    }


// -------------------------------------------------------------------------------------- // 
//                          loadNextPage
// -------------------------------------------------------------------------------------- //
function loadNextPage() {

        if( isAnimating ) {
			return false;
		}

		isAnimating = true;
		
		var $currPage = $pages.eq( current );

		if( current < pagesCount - 1 ) {
			++current;
		}
		else {
			current = 0;
		}

		var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
			outClass = 'pt-page-moveToRight', inClass = 'pt-page-moveFromLeft';
    

		$currPage.addClass( outClass ).on( animEndEventName, function() {
			$currPage.off( animEndEventName );
			endCurrPage = true;
			if( endNextPage ) {
				onEndAnimation( $currPage, $nextPage );
			}
		} );

		$nextPage.addClass( inClass ).on( animEndEventName,...