javascript - 向侧边导航栏添加过渡

Question

我有一个带有侧面导航栏的网站，它应该从右侧滑入，然后当您关闭它时，它会转换回侧面。在设计这个时，我意识到在单击侧边栏后，它会覆盖我的“transition:0.5s”样式，而只是出现。

这是我的代码

window.onclick = function(event){if(event.target == document.getElementById('outerNav')){closeNav();}};

function openNav() {
document.getElementById("outerNav").style.display = "block";
    document.getElementById("outerNav").style.transition = "0.5s";
document.getElementById("jrc-sidenav").style.width = "250px";
document.getElementById("et-main-area").style.opacity = "0.7";
document.getElementById("jrc-sidenav-background").style.backgroundColor = "rgba(255,255,255,0.7)";
document.getElementById("hamburger").style.display = "none";

}

function closeNav() {
document.getElementById("jrc-sidenav").style.width = "0";
document.getElementById("et-main-area").style.opacity = "1";
document.getElementById("jrc-sidenav-background").style.backgroundColor = "#fff";
document.getElementById("hamburger").style.display = "block";
    setTimeout(function(){
        document.getElementById("outerNav").style.display = "none";
},500);
}

.outerNav {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  transition: 0.5s;
}

<div id="outerNav" class="outerNav">
<div id="jrc-sidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<form autocomplete="off" name="wpv-filter--TCPID247646" action="https://jrcstage.jr-staging.info/search-results/" method="get" class="wpv-filter-form js-wpv-filter-form js-wpv-filter-form--TCPID247646 js-wpv-form-full" data-viewnumber="-TCPID247646" data-viewid="" data-viewhash="W10=" data-viewwidgetid="0" data-orderby="" data-order="" data-orderbyas="" data-orderbysecond="" data-ordersecond="" data-parametric="{" query":"normal","id":null,"view_id":null,"widget_id":0,"view_hash":"-tcpid247646","action":"\="" test-quadmenu\="" ?wpv_view_count="-TCPID247646&quot;,&quot;sort&quot;:{&quot;orderby&quot;:&quot;&quot;,&quot;order&quot;:&quot;&quot;,&quot;orderby_as&quot;:&quot;&quot;,&quot;orderby_second&quot;:&quot;&quot;,&quot;order_second&quot;:&quot;&quot;},&quot;orderby&quot;:&quot;&quot;,&quot;order&quot;:&quot;&quot;,&quot;orderby_as&quot;:&quot;&quot;,&quot;orderby_second&quot;:&quot;&quot;,&quot;order_second&quot;:&quot;&quot;,&quot;ajax_form&quot;:&quot;&quot;,&quot;ajax_results&quot;:&quot;&quot;,&quot;effect&quot;:&quot;fade&quot;,&quot;prebefore&quot;:&quot;&quot;,&quot;before&quot;:&quot;&quot;,&quot;after&quot;:&quot;&quot;,&quot;attributes&quot;:[],&quot;environment&quot;:{&quot;current_post_id&quot;:247646,&quot;parent_post_id&quot;:0,&quot;parent_term_id&quot;:0,&quot;parent_user_id&quot;:0,&quot;archive&quot;:{&quot;type&quot;:&quot;&quot;,&quot;name&quot;:&quot;&quot;,&quot;data&quot;:[]}},&quot;loop&quot;:{&quot;type&quot;:&quot;&quot;,&quot;name&quot;:&quot;&quot;,&quot;data&quot;:[],&quot;id&quot;:0}}&quot;" data-attributes="[]" data-environment="{" current_post_id":247646,"parent_post_id":0,"parent_term_id":0,"parent_user_id":0,"archive":{"type":"","name":"","data":[]}}"=""><input type="hidden" class="js-wpv-dps-filter-data js-wpv-filter-data-for-this-form" data-action="https://jrcstage.jr-staging.info/search-results/" data-page="1" data-ajax="disable" data-effect="fade" data-maxpages="1" data-ajaxprebefore="" data-ajaxbefore="" data-ajaxafter=""><input class="wpv_view_count wpv_view_count--TCPID247646" type="hidden" name="wpv_view_count" value="-TCPID247646">

<div class="form-group search-page search">
  <div class="search-form-group-inner">
    <input type="text" name="wpv_post_search" class="js-wpv-filter-trigger-delayed filter-text-search form-control" placeholder="Search"><i class="fas fa-search" style="position: absolute;
    right: 20px;
    top: 54px;
    color: #aaaa;"></i>
<span style="display:none" class="js-wpv-dps-spinner"><img src="https://jrcstage.jr-staging.info/wp-content/plugins/wp-views/embedded/res/img/ajax-loader4.gif"></span>
<input type="submit" class="jrc-search-button wpv-submit-trigger js-wpv-submit-trigger btn" name="wpv_filter_submit" value="Search">
  </div>
</div>
</form>

Answer 1

问题是你的外部导航。当您打开菜单时，它被设置为“display:block”——没有转换。如果您还通过过渡将其大小从 0% 调整为 100%，它应该可以工作。查看代码片段:

window.onclick = function(event) {
  if (event.target == document.getElementById('outerNav')) {
    closeNav();
  }
};

function openNav() {

  document.getElementById("outerNav").style.position = "fixed";
  document.getElementById("outerNav").style.width = "100%"; //added this for opening the menu
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.getElementById("outerNav").style.width = "0%";
  document.body.style.backgroundColor = "white";

}

body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
}

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

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  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;
  }
}

.outerNav {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 0%;
  /* 0% when Menu is closed */
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  transition: .5s;
}

<body>
  <div id="outerNav" class="outerNav">
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>
  </div>
  <div id="main">
    <h2>Sidenav Push Example</h2>
    <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
  </div>
</body>