lealhugui · September 6, 2016 16:45
diff --git a/60fpstransition.html b/60fpstransition.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title></title>
 	<style type="text/css">
 		.menu {
 		    position: fixed;
 		    left: 0;
 		    top: 0;
 		    width: 100%;
 		    height: 100%;
 		    overflow: hidden;
 		    pointer-events: none;
 		    z-index: 150;
 		}

 		.menu--visible {
 		    pointer-events: auto;
 		}

 		.app-menu {
 		    background-color: #fff;
 		    color: #fff;
 		    position: relative;
 		    max-width: 400px;
 		    width: 90%;
 		    height: 100%;
 		    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 		    -webkit-transform: translateX(-103%);
 		            transform: translateX(-103%);
 		    display: flex;
 		    flex-direction: column;
 		    will-change: transform;
 		    z-index: 160;
 		    pointer-events: auto;            
 		}

 		.menu--visible .app-menu {
 		    -webkit-transform: none;
 		            transform: none;
 		}

 		.menu--animatable .app-menu {
 		    transition: all 130ms ease-in;
 		}

 		.menu--visible.menu--animatable  .app-menu {
 		    transition: all 330ms ease-out;
 		}

 		.menu:after {
 		    content: '';
 		    display: block;
 		    position: absolute;
 		    left: 0;
 		    top: 0;
 		    width: 100%;
 		    height: 100%;
 		    background: rgba(0,0,0,0.4);
 		    opacity: 0;
 		    will-change: opacity;
 		    pointer-events: none;
 		    transition: opacity 0.3s cubic-bezier(0,0,0.3,1);
 		}

 		.menu--visible.menu:after {
 		    opacity: 1;
 		    pointer-events: auto;
 		}

 		/* aux */

 		body {
 		  margin: 0;
 		}

 		.layout {
 		  width: 375px;
 		  height: 667px;
 		  background-color: #f5f5f5;
 		  position: relative;
 		}

 		.header {
 		  background-color: #ccc;
 		}

 		.menu-icon {
 		  content: "Menu";
 		  color: #fff;
 		  background-color: #666;
 		  width: 40px;
 		  height: 40px;
 		}

 		.app-menu {
 		  width: 300px;
 		  height: 667px;
 		  box-shadow: none;
 		  background-color: #ddd;
 		}

 		.menu:after {
 		  width: 375px;
 		  height: 667px;
 		}

 		
 	</style>
 </head>
 <body>
 	<div class="menu">
 	    <div class="app-menu"></div>
 	</div>
 	<div class="layout">
 	    <div class="header">
 	        <div class="menu-icon"></div>
 	    </div>
 	</div>
 	<script type="text/javascript">
 		function toggleClassMenu() {
 			myMenu.classList.add("menu--animatable");	
 			if(!myMenu.classList.contains("menu--visible")) {		
 				myMenu.classList.add("menu--visible");
 			} else {
 				myMenu.classList.remove('menu--visible');		
 			}	
 		}

 		function OnTransitionEnd() {
 			myMenu.classList.remove("menu--animatable");
 		}

 		var myMenu = document.querySelector(".menu");
 		var oppMenu = document.querySelector(".menu-icon");
 		myMenu.addEventListener("transitionend", OnTransitionEnd, false);
 		oppMenu.addEventListener("click", toggleClassMenu, false);
 		myMenu.addEventListener("click", toggleClassMenu, false);		
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<style type="text/css">
	.menu {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 150;
	}

	.menu--visible {
	pointer-events: auto;
	}

	.app-menu {
	background-color: #fff;
	color: #fff;
	position: relative;
	max-width: 400px;
	width: 90%;
	height: 100%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	-webkit-transform: translateX(-103%);
	transform: translateX(-103%);
	display: flex;
	flex-direction: column;
	will-change: transform;
	z-index: 160;
	pointer-events: auto;
	}

	.menu--visible .app-menu {
	-webkit-transform: none;
	transform: none;
	}

	.menu--animatable .app-menu {
	transition: all 130ms ease-in;
	}

	.menu--visible.menu--animatable .app-menu {
	transition: all 330ms ease-out;
	}

	.menu:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	opacity: 0;
	will-change: opacity;
	pointer-events: none;
	transition: opacity 0.3s cubic-bezier(0,0,0.3,1);
	}

	.menu--visible.menu:after {
	opacity: 1;
	pointer-events: auto;
	}

	/* aux */

	body {
	margin: 0;
	}

	.layout {
	width: 375px;
	height: 667px;
	background-color: #f5f5f5;
	position: relative;
	}

	.header {
	background-color: #ccc;
	}

	.menu-icon {
	content: "Menu";
	color: #fff;
	background-color: #666;
	width: 40px;
	height: 40px;
	}

	.app-menu {
	width: 300px;
	height: 667px;
	box-shadow: none;
	background-color: #ddd;
	}

	.menu:after {
	width: 375px;
	height: 667px;
	}


	</style>
	</head>
	<body>
	<div class="menu">
	<div class="app-menu"></div>
	</div>
	<div class="layout">
	<div class="header">
	<div class="menu-icon"></div>
	</div>
	</div>
	<script type="text/javascript">
	function toggleClassMenu() {
	myMenu.classList.add("menu--animatable");
	if(!myMenu.classList.contains("menu--visible")) {
	myMenu.classList.add("menu--visible");
	} else {
	myMenu.classList.remove('menu--visible');
	}
	}

	function OnTransitionEnd() {
	myMenu.classList.remove("menu--animatable");
	}

	var myMenu = document.querySelector(".menu");
	var oppMenu = document.querySelector(".menu-icon");
	myMenu.addEventListener("transitionend", OnTransitionEnd, false);
	oppMenu.addEventListener("click", toggleClassMenu, false);
	myMenu.addEventListener("click", toggleClassMenu, false);
	</script>
	</body>
	</html>