CSS实现手机侧滑

川长思鸟来 2022-07-16 00:56 207阅读 0赞

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