温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

侧边栏的动画效果

发布时间:2020-09-24 16:20:23 来源:网络 阅读:306 作者:素颜猪 栏目:开发技术

效果:

侧边栏的动画效果

代码:

  1. html结构


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title></title>

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="sidebar.css">

</head>

<body>

<div id="sidebar">

<ul >

<li id="prof" class="item">

<span class="glyphicon glyphicon-user" aria-hidden="true"></span>

<div>我</div>

</li>

<li id="asset" class="item">

<span class="glyphicon glyphicon-usd" aria-hidden="true"></span>

<div>资产</div>

</li>

<li id="brand" class="item">

<span class="glyphicon glyphicon-home" aria-hidden="true"></span>

<div>品牌</div>

</li>

<li id="broadcast" class="item">

<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>

<div>直播</div>

</li>

<li id="foot" class="item">

<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>

<div>看过</div>

</li>

<li id="calendar" class="item">

<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>

<div>日历</div>

</li>

</ul>

<div id="closebar">

<span class="glyphicon glyphicon-remove"></span>

</div>

</div>

<div id="prof-content" class="nav-content">

<div class="nav-con-close">

<span class="glyphicon glyphicon-chevron-left"></span>

</div>

<div>我</div>

</div>

<div id="asset-content" class="nav-content">

<div class="nav-con-close">

<span class="glyphicon glyphicon-chevron-left"></span>

</div>

<div>资产</div>

</div>

<div id="brand-content" class="nav-content">

<div class="nav-con-close">

<span class="glyphicon glyphicon-chevron-left"></span>

</div>

<div>品牌</div>

</div>

<div id="broadcast-content" class="nav-content">

<div class="nav-con-close">

<span class="glyphicon glyphicon-chevron-left"></span>

</div>

<div>直播</div>

</div>

<div id="foot-content" class="nav-content">

<div class="nav-con-close">

<span class="glyphicon glyphicon-chevron-left"></span>

</div>

<div>看过</div>

</div>

<div id="calendar-content" class="nav-content">

<div class="nav-con-close">

<span class="glyphicon glyphicon-chevron-left"></span>

</div>

<div>日历</div>

</div>


<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="sidebar.js"></script>

</body>

</html>

  1. 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);

}

}

  1. 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.length; 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();


})();

侧边栏的动画效果

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI