css3动画右侧边栏,侧边栏的动画效果

效果:

代码:html结构

• 我
• 资产
• 品牌
• 直播
• 看过
• 日历

我

资产

品牌

直播

看过

日历

css样式

*{margin: 0px;padding: 0px;}

ul{list-style: none;}

#sidebar{width: 35px;background-color: #e1e1e1;padding-top: 200px;position: fixed;min-height: 100%;z-index: 100}

.item{font-size: 12px;font-family: 'Microsoft YaHei';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: 1px solid black;opacity: 0}

.nav-con-close{position: absolute;top: 5px;right: 5px;z-index: 99;cursor: pointer;}

.sidebar-move-left{

/*left: -120px;*/

-webkit-animation-name:sml;

-moz-animation-name:sml;

-o-animation-name:sml;

animation-name: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;

-webkit-animation-fill-mode:forwards;

-moz-animation-fill-mode:forwards;

-o-animation-fill-mode:forwards;

animation-fill-mode:forwards;

}

@keyframes sml{

from{

}

to{

transform:translateX(-120px);

}

}

.closeBar-move-right{

-webkit-animation-name:cmr;

-moz-animation-name:cmr;

-o-animation-name:cmr;

animation-name: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;

-webkit-animation-fill-mode:forwards;

-moz-animation-fill-mode:forwards;

-o-animation-fill-mode:forwards;

animation-fill-mode:forwards;

}

@keyframes cmr{

from{

}

to{

transform:translateX(160px) rotate(405deg) scale(1.5);

}

}

.sidebar-move-right{

-webkit-animation-name:smr;

-moz-animation-name:smr;

-o-animation-name:smr;

animation-name: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;

-webkit-animation-fill-mode:forwards;

-moz-animation-fill-mode:forwards;

-o-animation-fill-mode:forwards;

animation-fill-mode:forwards;

}

@keyframes smr{

from{

}

to{

transform:translateX(120px);

}

}

.closebar-move-left{

-webkit-animation-name:cml;

-moz-animation-name:cml;

-o-animation-name:cml;

animation-name: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;

-webkit-animation-fill-mode:forwards;

-moz-animation-fill-mode:forwards;

-o-animation-fill-mode:forwards;

animation-fill-mode:forwards;

}

@keyframes cml{

from{

transform:scale(1.5);

}

to{

transform:translateX(-160px) rotate(-405deg) scale(1);

}

}

.menucontent-move-right{

-webkit-animation-name:mmr;

-moz-animation-name:mmr;

-o-animation-name:mmr;

animation-name: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;

-webkit-animation-fill-mode:forwards;

-moz-animation-fill-mode:forwards;

-o-animation-fill-mode:forwards;

animation-fill-mode:forwards;

}

@keyframes mmr{

from{

opacity: 0;

}

to{

opacity: 1;

transform:translateX(120px);

}

}

.menucontent-move-left{

-webkit-animation-name:mml;

-moz-animation-name:mml;

-o-animation-name:mml;

animation-name:mml;

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

-webkit-animation-fill-mode:forwards;

-moz-animation-fill-mode:forwards;

-o-animation-fill-mode:forwards;

animation-fill-mode:forwards;

}

@keyframes mml{

from{

opacity: 1;

}

to{

opacity: 0;

transform:translateX(-120px);

}

}

.menucontent-move-up{

-webkit-animation-name:mmu;

-moz-animation-name:mmu;

-o-animation-name:mmu;

animation-name: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;

-webkit-animation-fill-mode:forwards;

-moz-animation-fill-mode:forwards;

-o-animation-fill-mode:forwards;

animation-fill-mode:forwards;

}

@keyframes mmu{

from{

opacity: 0;

}

to{

opacity: 1;

transform:translateY(-250px);

}

}js特效

(function () {

var Menubar = function (){

var self = this;

this.currentOpendMenuContent = null;

this.menuContentList = null;

this.el = document.querySelector('#sidebar ul');

this.state = 'allClosed';

this.el.addEventListener('click',function(e){

e.stopPropagation();

});

this.menuList = document.querySelectorAll('#sidebar ul > li');

for (var i = 0; i

this.menuList[i].addEventListener('click',function(e){

var menuContentEl = document.getElementById(e.currentTarget.id+'-content');

if (self.state === 'allClosed') {

menuContentEl.style.top = '0';

menuContentEl.style.left = '-85px';

menuContentEl.className = 'nav-content';

menuContentEl.classList.add('menucontent-move-right');

self.state = 'hasOpened';

self.currentOpendMenuContent = menuContentEl;

}else{

self.currentOpendMenuContent.style.top = '0px';

self.currentOpendMenuContent.style.left = '35px';

self.currentOpendMenuContent.className = 'nav-content';

self.currentOpendMenuContent.classList.add('menucontent-move-left');

menuContentEl.style.top = '250px';

menuContentEl.style.left = '35px';

menuContentEl.className = 'nav-content';

menuContentEl.classList.add('menucontent-move-up');

self.state = 'hasOpened';

self.currentOpendMenuContent = menuContentEl;

}

});

};

this.menuContentList = document.querySelectorAll('.nav-content > div.nav-con-close');

for (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.length = '35px';

menuContent.classList.add('menucontent-move-left');

self.state = 'allClosed';

});

};

}

var Sidebar = function (eId,closeBarId){

var self = this;

this.state = 'opened';

this.menubar = new Menubar();

this.el = document.getElementById(eId||'sidebar');

this.closeBarEl = document.getElementById(closeBarId||'closebar');

this.el.addEventListener('click',function(event){

if (event.target !== this.el) {

self.triggerSwitch();

};

});

};

Sidebar.prototype.close = function () {

console.log('关闭');

this.el.className = 'sidebar-move-left';

this.closeBarEl.className = 'closeBar-move-right';

this.state = 'closed';

};

Sidebar.prototype.open = function () {

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.triggerSwitch = function(){

if (this.state === 'opened') {

this.close();

}else{

this.open();

}

};

var sidebar = new Sidebar();

})();