Yangff/demo.html

## demo.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

	<style>
	html, body {
		height: 100%;
		-webkit-tap-highlight-color: transparent;
	}
	body, .page {
		background-color: #F8F8F8;
	}
	.page {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		opacity: 0;
		z-index: 1;
	}

	@keyframes slideIn {
	  from {
		transform: translate3d(100%, 0, 0);
		opacity: 0;
	  }
	  to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	  }
	}
	@keyframes slideOut {
	  from {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	  }
	  to {
		transform: translate3d(100%, 0, 0);
		opacity: 0;
	  }
	}

	.container {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;
	}

	.page.js_show {
		opacity: 1;
	}

	.page.slideIn {
	  animation: slideIn .2s forwards;
	}
	.page.slideOut {
	  animation: slideOut .2s forwards;
	}
	#page1 {
		background-color: #aa0000;
	}
	#page2 {
		background-color: #00bb00;
	}
	</style>
	<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body ontouchstart>
<div id="container" class="container">
<div id="page1" class="page js_show">
</div>
</div>
<script type="text/html" id="tpl_page">
<div id="page2" class="page">
<input type="text" id="input_box">
</div>
</script>
<script type="text/javascript">
	$('#page1').on('click', function (e){
		e.preventDefault();
		var html = $("#tpl_page").html()
		var $dom = $(html)
		$('#container').append($dom)		// keypoint 1
		$dom.addClass('slideIn').on('animationend webkitAnimationEnd', function(){  // keypoint 2
			$("#page2").removeClass('slideIn').addClass('js_show');
		});
		$("#input_box").focus();			// keypoint 3
	})
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

	<style>
	html, body {
	height: 100%;
	-webkit-tap-highlight-color: transparent;
	}
	body, .page {
	background-color: #F8F8F8;
	}
	.page {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	z-index: 1;
	}

	@keyframes slideIn {
	from {
	transform: translate3d(100%, 0, 0);
	opacity: 0;
	}
	to {
	transform: translate3d(0, 0, 0);
	opacity: 1;
	}
	}
	@keyframes slideOut {
	from {
	transform: translate3d(0, 0, 0);
	opacity: 1;
	}
	to {
	transform: translate3d(100%, 0, 0);
	opacity: 0;
	}
	}

	.container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	}

	.page.js_show {
	opacity: 1;
	}

	.page.slideIn {
	animation: slideIn .2s forwards;
	}
	.page.slideOut {
	animation: slideOut .2s forwards;
	}
	#page1 {
	background-color: #aa0000;
	}
	#page2 {
	background-color: #00bb00;
	}
	</style>
	<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	</head>
	<body ontouchstart>
	<div id="container" class="container">
	<div id="page1" class="page js_show">
	</div>
	</div>
	<script type="text/html" id="tpl_page">
	<div id="page2" class="page">
	<input type="text" id="input_box">
	</div>
	</script>
	<script type="text/javascript">
	$('#page1').on('click', function (e){
	e.preventDefault();
	var html = $("#tpl_page").html()
	var $dom = $(html)
	$('#container').append($dom) // keypoint 1
	$dom.addClass('slideIn').on('animationend webkitAnimationEnd', function(){ // keypoint 2
	$("#page2").removeClass('slideIn').addClass('js_show');
	});
	$("#input_box").focus(); // keypoint 3
	})
	</script>
	</body>
	</html>