侧导航滑动过渡不滑出

时间：2017-05-01 23:29:54

标签： javascript html css

我的元素很好地滑动但不能滑出。我认为这与display：none语法有关 任何帮助或建议都表示赞赏，如果您需要更多信息，请询问。谢谢 我也包括了一个JSfiddle：
https://jsfiddle.net/fraserdale/8Lm78mbv/ 

<div id="mySidenav" class="sidenav1 change  " style="width: 250px">
<ul style="list-style-type: none">
<li><a href="#">Thanks </a></li>
<li><a href="#">For</a></li>
<li><a href="#">The</a></li>
<li><a href="#">Help!</a></li>
</ul>
</div>
<div class="sidenav slideTogglebox" id="sidenav">
    <div class="toggle change" onclick="myFunction(this)" id="slideToggle">
        <div class="bar1 animated fadeIn"></div>
        <div class="bar2 "></div>
        <div class="bar3 animated fadeIn"></div>
    </div>
  <ul class="sidebar-inner " id="modes"> 
    <li class="gamemode fa fa-3x fa-dot-circle-o active animated fadeIn"><a href="#"></a></li>
    <li class="gamemode fa fa-3x fa-pie-chart animated fadeIn"><a href="#"></a></li>
    <li class="gamemode fa fa-3x fa-delicious animated fadeIn"><a href="#"></a></li>
    <li class="gamemode fa fa-3x fa-line-chart animated fadeIn"><a href="#"></a></li>
    <li class="gamemode fa fa-3x fa-braille animated fadeIn"><a href="#"></a></li>
  </ul>
</div>


<h1 id="main" class="animated fadeIn"> Lorem Ipsum</h1>

和JS 

<script>
function myFunction(x) {
x.classList.toggle("change");
var x = document.getElementById('mySidenav');
if (x.style.display === 'none') {
  x.style.display = 'block';
    document.getElementById("mySidenav").style.marginLeft = "0px";
    document.getElementById("main").style.marginLeft = "375px";
    document.getElementById("sidenav").style.marginLeft = "250px";
} else {
   <!-- x.style.display = 'none';
    document.getElementById("mySidenav").style.marginLeft = "-250px";
    document.getElementById("main").style.marginLeft = "125px";
    document.getElementById("sidenav").style.marginLeft = "-0px";
}
}

最后是CSS 

body {
background-color: #23272B;
margin: 0px;
padding: 0px;
outline: none;
}


.credit{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-size: 15px;
color: #fff;
font-family: Verdana, Geneva, Tahoma, sans-serif
}
.sidenav {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #16191C;
position: fixed;
top: 0px;
width: 125px;
height: 100%;
color: #e1ffff;
z-index: 200;
margin-left: 250px;
transition: 1s;
}

* {
transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out ;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a {
text-decoration: none;
font-family: open sans, sans-serif;
}
.sidebar-inner {
height: 200px;
position: relative;
top: 50%;
transform: translateY(-50%);
padding-left: 25px;
padding-right: 25px;
transition: 1s;

}



ul .gamemode:hover {
opacity: 1;
background-color: #3B50D4;
transition: 0.4s;
}

li {
transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out ;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.active {
background-color: #3B50D4;
}
.gamemode {
/*border: 1px solid white;*/
width: 65px;
color: #fff;
font-size: 30px;
text-align: center;
padding: 15%;
/*display: block;*/
}

.toggle {
display: inline-block;
cursor: pointer;
position: absolute;
width: 100%;
padding: 25%;
}

.bar1, .bar2, .bar3 {
width: 45px;
height: 5px;
background-color: #333;
margin: 6px ;
transition: 1s;
}

/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}

.sidenav1 {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
/*left: 100px;*/
background-color: #111;
overflow-x: hidden;
transition: 1s;
padding-top: 60px;
transform: 0.3

}

.sidenav1 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
/*display: block;*/
transition: 0.3s;
}

.sidenav1 a:hover, .offcanvas a:focus{
     color: #f1f1f1;
     }

.sidenav1 .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

#main {
margin-left: 375px;
transition: margin-left 1s;
padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

1 个答案:

答案 0 :(得分：3)

当您从display: none滑出屏幕时，您没有隐藏该菜单，因此if (x.style.display === 'none') {的测试无法测试状态。我刚刚在该元素中添加了一个.closed类，它将在菜单打开/关闭时切换，并可用于检测状态。

body {
    background-color: #23272B;
    margin: 0px;
    padding: 0px;
    outline: none;
}


.credit{
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	font-size: 15px;
	color: #fff;
	font-family: Verdana, Geneva, Tahoma, sans-serif
}
.sidenav {
	overflow: auto;
	font-family: verdana;
	font-size: 12px;
	font-weight: 200;
	background-color: #16191C;
	position: fixed;
	top: 0px;
	width: 125px;
	height: 100%;
	color: #e1ffff;
	z-index: 200;
	margin-left: 250px;
	transition: 1s;
}

* {
	transition: all 500ms ease-out;
	-webkit-transition: all 500ms ease-out ;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	text-decoration: none;
	font-family: open sans, sans-serif;
}
.sidebar-inner {
	height: 200px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	padding-left: 25px;
	padding-right: 25px;
    transition: 1s;
  
}
 


ul .gamemode:hover {
	opacity: 1;
	background-color: #3B50D4;
	transition: 0.4s;
}

li {
	transition: all 500ms ease-out;
	-webkit-transition: all 500ms ease-out ;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.active {
	background-color: #3B50D4;
}
.gamemode {
	/*border: 1px solid white;*/
	width: 65px;
	color: #fff;
	font-size: 30px;
	text-align: center;
	padding: 15%;
	/*display: block;*/
}

.toggle {
    display: inline-block;
    cursor: pointer;
	position: absolute;
	width: 100%;
	padding: 25%;
}

.bar1, .bar2, .bar3 {
	width: 45px;
    height: 5px;
    background-color: #333;
    margin: 6px ;
    transition: 1s;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

.sidenav1 {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    /*left: 100px;*/
    background-color: #111;
    overflow-x: hidden;
    transition: 1s;
    padding-top: 60px;
	transform: 0.3

}

.sidenav1 a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    /*display: block;*/
    transition: 0.3s;
}

.sidenav1 a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav1 .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
	margin-left: 375px;
    transition: margin-left 1s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Memes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <link rel="stylesheet" href="assets/css/style.css">
  <script src="https://use.fontawesome.com/9d0e231cc7.js"></script>
</head>

<body>
	<div id="mySidenav" class="sidenav1 change  " style="width: 250px">
<ul style="list-style-type: none">
  <li><a href="#">Thanks </a></li>
  <li><a href="#">For</a></li>
  <li><a href="#">The</a></li>
  <li><a href="#">Help!</a></li>
  </ul>
</div>
    <div class="sidenav slideTogglebox" id="sidenav">
		<div class="toggle change" onclick="myFunction(this)" id="slideToggle">
			<div class="bar1 animated fadeIn"></div>
			<div class="bar2 "></div>
			<div class="bar3 animated fadeIn"></div>
		</div>
      <ul class="sidebar-inner " id="modes"> 
        <li class="gamemode fa fa-3x fa-dot-circle-o active animated fadeIn"><a href="#"></a></li>
        <li class="gamemode fa fa-3x fa-pie-chart animated fadeIn"><a href="#"></a></li>
        <li class="gamemode fa fa-3x fa-delicious animated fadeIn"><a href="#"></a></li>
        <li class="gamemode fa fa-3x fa-line-chart animated fadeIn"><a href="#"></a></li>
        <li class="gamemode fa fa-3x fa-braille animated fadeIn"><a href="#"></a></li>
      </ul>
    </div>


<h1 id="main" class="animated fadeIn"> Lorem Ipsum</h1>
<script>
function myFunction(x) {
    x.classList.toggle("change");
	var x = document.getElementById('mySidenav');
  	x.classList.toggle('closed');
    if (!x.classList.contains('closed')) {
      //x.style.display = 'block';
		document.getElementById("mySidenav").style.marginLeft = "0px";
		document.getElementById("main").style.marginLeft = "375px";
		document.getElementById("sidenav").style.marginLeft = "250px";
    } else {
       <!-- x.style.display = 'none'; -->
		document.getElementById("mySidenav").style.marginLeft = "-250px";
		document.getElementById("main").style.marginLeft = "125px";
		document.getElementById("sidenav").style.marginLeft = "-0px";
    }
}
</script>
	
	



</body>
</html>

相关问题
最新问题