0
我的元素滑動很好，但無法滑回。我認爲這是與顯示有關：無語法 任何幫助或建議的讚賞，如果你需要更多的信息只是問。由於 我已經包括的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;}
}
你做了很多工作，CSS的JavaScript中 - 爲什麼不只是切換的一個或多個類與JS，那麼有「主動」 CSS樣式？ – Toby