Javascript 将过渡添加到侧导航栏[已解决]

我有一个网站，有一个侧边导航条，应该从右侧滑入，然后当你关闭它时，它会转换回侧边。在设计这个时，我意识到在单击侧栏后，它会覆盖我的“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);
}

---

问题在于您的外部导航。当你打开菜单时，它被设置为“display:block”——这在没有转换的情况下发生。 如果您还通过转换将其从0%调整为100%，那么它应该可以工作。请参见代码片段：

window.onclick=函数（事件）{
if（event.target==document.getElementById（'outerNav'））{
closeNav（）；
}
};
函数openNav（）{
document.getElementById（“outerNav”）.style.position=“fixed”；
document.getElementById（“outerNav”）.style.width=“100%”；//为打开菜单添加了此选项
document.getElementById（“mySidenav”）.style.width=“250px”；
document.getElementById（“main”）.style.marginLeft=“250px”；
document.body.style.backgroundColor=“rgba（0,0,0,0.4）”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
document.getElementById（“main”）.style.marginLeft=“0”；
document.getElementById（“outerNav”）.style.width=“0%”；
document.body.style.backgroundColor=“白色”；
}

正文{
字体系列：“Lato”，无衬线；
过渡：背景色。5s；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
#主要{
过渡：左边距。5s；
填充：16px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
}
奥特纳夫先生{
显示：块；
位置：固定；
左：0；
排名：0；
宽度：0%；
/*菜单关闭时为0%*/
身高：100%；
溢出：隐藏；
背景色：透明；
过渡：.5s；
}

侧导航推送示例
单击下面的元素打开侧面导航菜单，并将此内容向右推。请注意，当sidenav打开时，我们为body添加了一个黑色透明背景色

☰ 打开

嘿，Mario，这在你第一次点击它时效果很好，但是在多次点击它之后，当打开导航时，它会返回到无过渡状态，然后突然打开！我编辑了我的答案-现在它应该每次都能工作（去掉显示：无/块的东西）它工作得令人惊讶！非常感谢你的帮助！

.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>