向侧导航栏添加过渡 [已解决]

Question

I have a site with a side navigation bar that is supposed to slide in via the right side, then when you close it, it transitions back into the side. When designing this i realized that after clicking the side bar once it overrides my style of "transition:0.5s" and instead just appears.

Here is my code

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

The Problem is your outer-nav. When you open the menu it got set to "display:block" - that happens without a transition. If you also resize it from 0% to 100% with a transition, it should work. See the snippet:

 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>