javascript - 滑动菜单，如何同时滑入和滑出？

Question

我正在尝试构建一个只需按一下按钮即可滑入和滑出的菜单。此外，当菜单打开时，单击屏幕的任何部分时它应该滑出。

到目前为止，我已经设法创建了除滑出效果之外的所有内容，现在幻灯片就消失了，没有从右向左移动。

var navBtn = document.getElementById("navBtn");
var navMenu = document.getElementById("navMenu");
var container = document.getElementById("container");
navBtn.addEventListener("click", showMenu);
container.addEventListener("click", hideMenu);

navMenu.style.display = "none";

function showMenu(){
if(navMenu.style.display !== "none"){
navMenu.style.display = "none"}
else{navMenu.style.display = "block", container.style.background = "rgba(0, 102, 199, 1)";}}

function hideMenu(){
if(navMenu.style.display = "block"){
navMenu.style.display = "none", container.style.background = "lightblue";}}

#main-container {
  width: 350px;
  height: 600px;
  border: 1px solid black;
  position: absolute;
  overflow: hidden;
}

#container {
  width: 350px;
  height: 100%;
  display: absolute;
  z-index: 1;
  background: rgba(0, 102, 199, 0.8);
}

#navBtn {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  z-index: 999;
}

#navMenu {
  width: 250px;
  height: 100%;
  background: blue;
  position: absolute;
  z-index: 9999;
  top: 0;
  animation-name: slidein;
  animation-duration: .5s;
}

@-webkit-keyframes slidein {
  0% {transform: translateX(-200px);}
  100% {transform: translateX(0px);}
}

#navMenu.close {
  animation-name: slideout;
  animation-duration: .5s;
}

@-webkit-keyframes slideout {
  0% {transform: translateX(0px);}
  100% {transform: translateX(-200px);}
}

<div id="main-container">
<div id="navBtn"></div>
<div id="container">
<div id="navMenu"></div>
</div>
</div>

也许有人可以告诉我实现此目标的方法？基本上slide in effect应该和slide in一样，只是反过来而已。

Answer 1

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}


function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}

body {
    font-family: "Lato", sans-serif;padding:40px;
}


.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #B971BB;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

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

.sidenav a:hover {
    color: #f1f1f1;
}

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

#main {
    transition: margin-left .5s;
    padding: 16px;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <h2>Sidena Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>