目前的网页都右侧边栏，有的是在左侧，类似于导航栏，如一些购物商城，还有一些是在网页的右下角，一般是提示客服信息和微信/QQ等服务。
这里都涉及到一个动画效果的展示，即点击侧边栏时会在侧边栏的右侧或者左侧出现相应的信息。如下图慕课网右下角的侧边栏，把鼠标放在最后一个微信图标上，会弹出慕课网的二维码。
实现动画效果的方式有两种，一种是JavaScript setInterval函数，即设置定时器，实现简单，但是效果不佳。动画效果不够平滑，而且实现的效果有限，不能实现旋转和3D变换。用户体验有待提高。另一种是使用CSS3来实现动画效果。
css属性
描述动画的运行属性（运行时间、次数等）
transition （过渡）
animations（ 动画）
描述动画的执行属性（参与动画的属性，效果等）
transform （变形）——translate
代码实现：
sidebar.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>sideBar demo</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css"><link rel="stylesheet" href="bootstrap/dist/css/bootstrap-theme.css"></head><body><div id = "sidebar"><ul><li id="prof" class="item"><span class="glyphicon glyphicon-user"></span><div>我</div></li><li id="asset" class="item"><span class="glyphicon glyphicon-user"></span><div>资产</div></li><li id="brand" class="item"><span class="glyphicon glyphicon-user"></span><div>商品</div></li><li id="foot" class="item"><span class="glyphicon glyphicon-user"></span><div>足迹</div></li><li id="calender" class="item"><span class="glyphicon glyphicon-user"></span><div>日历</div></li></ul><div id="closeBar"><span class="glyphicon glyphicon-remove"></span></div></div><div class="nav-content" id="prof-content"><div class="nav-con-close"><span class="glyphicon glyphicon-chevron-left"></span></div><div>我</div></div><div class="nav-content" id="asset-content"><div class="nav-con-close"><span class="glyphicon glyphicon-chevron-left"></span></div><div>资产</div></div><div class="nav-content" id="brand-content"><div class="nav-con-close"><span class="glyphicon glyphicon-chevron-left"></span></div><div>商标</div></div><div class="nav-content" id="foot-content"><div class="nav-con-close"><span class="glyphicon glyphicon-chevron-left"></span></div><div>足迹</div></div><div class="nav-content" id="calender-content"><div class="nav-con-close"><span class="glyphicon glyphicon-chevron-left"></span></div><div>日历</div></div><script src="sideBar.js"></script></body></html>
注：
<!--页面加载顺序是单线程的，加载页面时是从上到下加载，如果在上面遇到script标签或者css时，页面的
渲染就会停止，服务器就回去下载.js和.css文件代码，下载后运行，我们会看到页面停顿，这是种非常不好的体验
所以目前的做法都是把<script>标签放在</body>上面-->
<!--完好体验的页面顺序安排
1、先下载css样式
2、渲染HTML文档结构
3、再下载JavaScript代码-->
style.css
ul{list-style: none;padding-left: 0;}#sidebar{width: 35px;background-color: #e1e1e1;padding-top: 200px;/*设置高度100%都是相对父元素的100%，fixed使该元素脱离流，相对屏幕的100%，即全屏*/position: fixed;min-height:100%;z-index: 100;}.item{font-size: 12px;font-family: 'Microsoft New Tai Lue';text-align: center;margin-top: 5px;}#closeBar{position: absolute;bottom: 30px;width: 35px;text-align: center;/*提示别人是个按钮 手的样式*/cursor: pointer;}.nav-content{width: 200px;position: fixed;min-height: 100%;background-color: #e1e1e1;/*调试代码时经常使用border，帮我们定位到div的一个区域*/border: 1px solid black;z-index: 99;/*使用透明度为0来隐藏元素*/opacity: 0;}.nav-con-close{position: absolute;top: 5px;right: 5px;cursor: pointer;}.sidebar-move-left{-webkit-animation:sml;-o-animation:sml;animation:sml;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}@keyframes sml {from{}to{transform: translateX(-120px);}}.closebar-move-right{-webkit-animation:cmr;-o-animation:cmr;animation:cmr;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}@keyframes cmr {from{}to{transform: translateX(160px) rotate(405deg) scale(1.5);}}.sidebar-move-right{-webkit-animation:smr;-o-animation:smr;animation:smr;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}@keyframes smr {from{}to{transform: translateX(120px);}}.closebar-move-left{-webkit-animation:cml;-moz-animation-name: cml;-o-animation:cml;animation:cml;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}@keyframes cml {from{transform: scale(1.5);}to{transform:translateX(-160px) rotate(-405deg) scale(1);}}.menuContent-move-right{-webkit-animation:mmr;-moz-animation-name: mmr;-o-animation:mmr;animation:mmr;/*持续时间*/-webkit-animation-duration: .5s;-moz-animation-duration: .5s;-o-animation-duration: .5s;animation-duration: .5s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}@keyframes mmr {from{opacity: 0;}to{opacity: 1;transform:translateX(120px);}}.menuContent-move-left{-webkit-animation:mml;-moz-animation-name: mml;-o-animation:mml;animation:mml;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}@keyframes mml {from{opacity: 1;}to{opacity: 0;transform:translateX(-120px);}}.menuContent-move-up{-webkit-animation:mmu;-moz-animation-name: mmu;-o-animation:mmu;animation:mmu;/*持续时间*/-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 1;-moz-animation-iteration-count: 1;-o-animation-iteration-count: 1;animation-iteration-count: 1;/*执行方向，动画执行结束时保持在它结束时的状态*/animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-o-animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards;}@keyframes mmu {from{opacity: 0;}to{opacity: 1;transform:translateY(-250px);}}
sidebar.js
/*var sideBar = {} 会造成全局污染，sideBar赋给Windows，作为windows的一个属性*//*目前常用模块模式的方法，避免全局污染*//*立即执行函数*/(function () {var MenuBar = function () {this.el = document.querySelector('#sidebar ul');this.state = 'allClosed';/*禁止向上传播，不然点击sidebar中的ul也会触发和点击关闭按钮一样的事件*/this.el.addEventListener('click',function (e) {e.stopPropagation();});var self = this;this.menulist = document.querySelectorAll('#sidebar ul > li');this.currentOpenMenuContent = null;for(var i = 0;i<this.menulist.length;i++){this.menulist[i].addEventListener('click',function (e) {var menuContentEl = document.getElementById(e.currentTarget.id +'-content');if(self.state === 'allClosed'){console.log('open'+menuContentEl.id);menuContentEl.style.top = '0';menuContentEl.style.left = '-85px';menuContentEl.className = 'nav-content';menuContentEl.classList.add('menuContent-move-right');self.state='hasOpened';self.currentOpenMenuContent = menuContentEl;}else{console.log('closed'+self.currentOpenMenuContent.id);console.log('open'+menuContentEl.id);self.currentOpenMenuContent.className = 'nav-content';self.currentOpenMenuContent.style.top = '0';self.currentOpenMenuContent.style.left = '35px';self.currentOpenMenuContent.classList.add('menuContent-move-left');menuContentEl.className='nav-content';menuContentEl.style.top = '250px';menuContentEl.style.left = '35px';menuContentEl.classList.add('menuContent-move-up');self.state='hasOpened';self.currentOpenMenuContent = menuContentEl;}});}this.menuContentList = document.querySelectorAll('.nav-content > div.nav-con-close');for(var i=0;i<this.menuContentList.length;i++){this.menuContentList[i].addEventListener('click',function (e) {var menuContent = e.currentTarget.parentNode;menuContent.className = 'nav-content';menuContent.style.top = '0';menuContent.style.left ='35px';menuContent.classList.add('menuContent-move-left');this.state='allClosed';});}};/*Sidebar第一个字母大写，构造函数的基本规范 */var Sidebar = function (eId,closeBarId) {this.state = 'opened';this.el = document.getElementById(eId || 'sidebar');this.closeBarEl = document.getElementById(closeBarId || 'closeBar');/*默认向上冒泡,第三个参数可以不写*/var self = this;this.menubar = new MenuBar();this.el.addEventListener('click',function (event) {if(event.target !== self.el){//console.log(this);self.triggerSwich();}});}Sidebar.prototype.close = function () {console.log('关闭sidebar');this.el.className = 'sidebar-move-left';this.closeBarEl.className = 'closebar-move-right';this.state = 'closed';};Sidebar.prototype.open = function () {console.log('打开sidebar');this.el.style.left = '-120px';this.el.className = 'sidebar-move-right';this.closeBarEl.style.left = '160px';this.closeBarEl.className = 'closebar-move-left';this.state = 'opened';};Sidebar.prototype.triggerSwich = function () {if(this.state === 'opened'){this.close();}else{this.open();}};var sidebar = new Sidebar();})();
