JSFiddle - React, Tailwind, and code Playground

by fainick

HTML

<body>
	<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" style="background-color: #00ff00;">
			<h1>page2</h1>
		</div>
		<div id="page3" class="page" style="background-color: #0000ff;">
			<h1>page3</h1>
		</div>
	</div>
</body>

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;
	}
	
	.page{
		width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0;
    	left: 0;
    	visibility: hidden;
    	overflow: hidden;
    	backface-visibility: hidden;
	}
	
	.current{
		visibility: visible;
		z-index: 1;
	}

/* animation sets */

/* move from / to  */

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

.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;
}

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

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

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

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

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

/* fade */

.pt-page-fade {
	-webkit-animation: fade .7s ease both;
	-moz-animation: fade .7s ease both;
	animation: fade .7s ease both;
}

/* move from / to and fade */

.pt-page-moveToLeftFade {
	-webkit-animation: moveToLeftFade...

JavaScript

$(document).ready(function(){
		$("#p12").click(function(){
			$("#page1").addClass("pt-page-moveToLeft");
			$(".page").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
			function() {
 				alert("finished");
			});
			
			//$("#page2").addClass("current");
			//$("#page2").addClass("pt-page-moveFromLeft");
			//$("#page1").removeClass("current");
		});
	});
	
	// $(".page").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
	// function() {
 		// alert("finished");
	// });