- <!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