前端入坑纪 55
今天来分享个最近做的侧边效果，思路很easy
好，详解如下！
OK，first things first！ github项目地址
抱歉，长得有点对不起观众
HTML 结构
<nav>
<ul>
<li><a href="javascript:;">Page1</a></li>
<li><a href="javascript:;">Page2</a></li>
<li><a href="javascript:;">Page3</a></li>
<li><a href="javascript:;">Page4</a></li>
<li><a href="javascript:;">Page5</a></li>
</ul>
</nav>
<div class="mainWrp" id="mainWrp">
<button id="menu">menu</button>
<p>
黄丽玲（A-Lin），1983年9月20日出生于台湾省台东市，台东阿美族原住民，华语流行乐女歌手。</p>
<p>1999年，黄丽玲在南投教921地震后的小朋友们唱诗歌时被经纪人发现。2003年，黄丽玲正式签约艾回唱片。</p>
<p>2007年，黄丽玲凭借首张个人专辑《失恋无罪》获得第18届台湾金曲奖最佳新人奖提名 [1] ；同年7月，黄丽玲与相差八岁的棒球选手黄甘霖结婚，并在其后育有一女 [2] 。2009年，黄丽玲凭借《天生歌姬》专辑首次获得台湾金曲奖最佳国语女歌手奖提名 [3] 。
</p>2011年，黄丽玲凭借专辑《寂寞不痛》再次获得金曲奖最佳国语女歌手提名。
<p>2012年，黄丽玲凭借专辑《我们会更好的》第三次获得金曲奖最佳国语女歌手提名。同年，黄丽玲还发行了第五张个人专辑《幸福了，然后呢》。</p>
<p>2013年，黄丽玲在台北小巨蛋举办了Feel-Lin个人演唱会 [4] 。2014年，黄丽玲加盟索尼音乐 [5] ；并于同年12月30日发行第六张个人专辑《罪恶感》。
</p>
<p>2015年，黄丽玲因参加职业歌手对战节目《我是歌手第三季》而在内地获得更高关注度 [6] ；同年，黄丽玲还凭借专辑《罪恶感》第四次获得金曲奖最佳国语女歌手提名。
</p>
</div>
nav是隐藏起来的导航，div.mainWrp，是要动画变化的主体，里面的p只是内容填充下。
CSS 结构
body {
background-color: #fff;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.mainWrp {
padding: 10px;
position: fixed;
background-color: lightcyan;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
overflow: auto;
box-shadow: 0 0 1px #ccc, -3px 0 8px lightcyan;
transition: transform 1s cubic-bezier(0.215, 0.610, 0.355, 1)
}
.shrik {
transform: scale3d(.8, .8, .8) translateX(70%)
}
nav {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
width: 50%;
background-color: lightcyan;
}
nav li {
line-height: 37px;
width: 80px;
text-align: center;
}
nav li a {
color: #333;
}
让nav和div.mainWrp都fixed布局，给div.mainWrp加过渡时的样式，也就是transition上的东东。然后就是怎么变得东西.shrik
JavaScript 结构
var menu = document.querySelector('#menu')
var mainWrp = document.querySelector('#mainWrp')
menu.addEventListener('touchstart', function(evt) {
evt.stopPropagation() // 阻止事件冒泡
mainWrp.className = "mainWrp shrik"
})
mainWrp.addEventListener('touchstart', function(evt) {
mainWrp.className = "mainWrp"
})
1.给menu点击的时候，加事件（让div.mainWrp 多个shrik的class）
2.给div.mainWrp点击的时候，加事件（让div.mainWrp 少个shrik的class）
3.因为menu 是嵌套在 div.mainWrp 内，所以要阻止事件冒泡
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！
支持你我，扫一扫红包
