[英]Adding transition to Side nav bar [SOLVED]
我有一個帶有側面導航欄的網站,應該通過右側滑入,然后當您關閉它時,它會過渡回側面。 在設計這個時,我意識到點擊側欄后,它會覆蓋我的“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","sort":{"orderby":"","order":"","orderby_as":"","orderby_second":"","order_second":""},"orderby":"","order":"","orderby_as":"","orderby_second":"","order_second":"","ajax_form":"","ajax_results":"","effect":"fade","prebefore":"","before":"","after":"","attributes":[],"environment":{"current_post_id":247646,"parent_post_id":0,"parent_term_id":0,"parent_user_id":0,"archive":{"type":"","name":"","data":[]}},"loop":{"type":"","name":"","data":[],"id":0}}"" 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>
問題是你的外部導航。 當您打開菜單時,它被設置為“顯示:塊” - 這發生在沒有過渡的情況下。 如果您還通過過渡將其大小從 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()">×</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()">☰ open</span> </div> </body>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.