移动端右侧导航 显示隐藏js

transform与fixed影响

 

html按钮

css显示隐藏样式

body.active{   /* class=active的标签生效 */
    transform: translate3d(-260px,0,0);
    transition: all 0.2s ease-in-out;
}
body.show{   /* class=show的标签生效 */
    transform: translate3d(0px,0,0);
    transition: all 0.2s ease-in-out;
}

　　

js部分

			// 右侧导航
			document.addEventListener("DOMContentLoaded", function(){
				(function(){
					var btn  = document.querySelector(".nav-btn"),
						clo  = document.querySelector(".close"),
						body = document.querySelector("body");
						btn.onclick = function(){
							body.classList.add("active"); //添加左划动画
							body.classList.remove("show"); //删除右划动画
							btn.style.display='none';    //隐藏三横按钮
							clo.style.display='block'	//显示X按钮
// 							$('.nav-btn').css({display:'none'}),  //jQuery显示隐藏方法
// 							$('.close').css({display:'block'})
						}
						clo.onclick = function(){
							body.classList.add("show"); //添加右划动画
							body.classList.remove("active"); //删除左划动画
							btn.style.display='block';    //显示三横按钮
							clo.style.display='none';	//隐藏X按钮
// 							$('.nav-btn').css({display:'block'}),
// 							$('.close').css({display:'none'})
						}
				})(window)
			},false);

　　

转载于:https://www.cnblogs.com/qing1304197382/p/10102340.html