<!DOCTYPE html>
<html>
<head>
<title>app-menu</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: 80%;
height: 100%;
background-color: #ddd;
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;
transition: all 0.5s ease-in;
transition: all 0.4s ease-out;
}
.menu--visible .app-menu {
-webkit-transform: none;
transform: none;
}
.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 1s cubic-bezier(0,0,0.3,1);
}
.menu--visible.menu:after {
opacity: 1;
pointer-events: auto;
}
/* aux */
body {
margin: 0;
}
.layout {
width: 100%;
}
.header {
background-color: #ccc;
}
.menu-icon {
background-color: #b34848;
width: 100px;
height: 100px;
}
</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>
</body>
<script src="http://webpic.my4399.com/o2o/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function toggleClassMenu() {
if(!myMenu.classList.contains("menu--visible")) {
myMenu.classList.add("menu--visible");
} else {
myMenu.classList.remove('menu--visible');
}
}
var myMenu = document.querySelector(".menu");
var oppMenu = document.querySelector(".menu-icon");
oppMenu.addEventListener("click", toggleClassMenu, false);
myMenu.addEventListener("click", toggleClassMenu, false);
</script>
</html>
参考网站:http://www.zcfy.cc/article/smooth-as-butter-achieving-60-fps-animations-with-css3-1054.html