侧面导航滑动过渡不滑出

Question

My element slides in fine but cannot slide back out. I think it is something to do with the display: none syntax Any help or suggestions are appreciated and if you need more info just ask. Thanks I have included a JSfiddle as well :
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>

and the 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";
}
}

and finally the 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;}
}

Answer 1

You aren't hiding that menu with display: none when it slides off the screen, so the test for if (x.style.display === 'none') { won't work to test the state. I just added a .closed class to that element that will toggle as the menu opens/closes and can be used to detect the state instead.

 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>