I'm a newcomer to web development and facing an issue with setting the transition speed for opening and closing this side menu. Despite adding transitions in the CSS and specifying duration in the Javascript, the menu continues to open instantly. I did my research before reaching out here, but none of the solutions seemed to work. Any help from you all would be greatly appreciated.
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
document.getElementById("mySidepanel").style.transitionDuration = "0.5s";
document.getElementById("mySidepanel").style.display = "block";
document.getElementById("openbtn").style.display = 'none';
}
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
document.getElementById("mySidepanel").style.transitionDuration = "0.5s";
document.getElementById("mySidepanel").style.display = "none";
document.getElementById("openbtn").style.display = "inline-block";
}/** Navigation Bar **/
.sidepanel {
width: 0;
position: fixed;
z-index: 1;
height: 100%;
top: 0;
right: 0;
background-color: rgba(17, 17, 17, 0.425);
overflow-x: hidden;
padding-top: 60px;
transition: all 0.5s ease-in-out;
}
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
font-family: "lato", sans-serif;
color: #818181;
display: block;
}
.sidepanel a:hover {
color: #f1f1f1;
}
.sidepanel #closebtn {
position: absolute;
top: 10px;
right: 20px;
font-size: 36px;
margin-left: 50px;
}
#openbtn {
font-size: 30px;
cursor: pointer;
background: -webkit-linear-gradient(white, #38495a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 10px 15px;
border: none;
float: right;
}
#openbtn:hover {
background: -webkit-linear-gradient(#748df0c9, #324dbbc9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
a:hover .fas {
color: #3e5ddac9;
text-shadow: 0 0 5px #3e5ddac9;
}
a:hover .far {
color: #3e5ddac9;
text-shadow: 0 0 5px #3e5ddac9;
}<div id="mySidepanel" class="sidepanel" style="display: none;">
<a href="javascript:void(0)" id="closebtn" onclick="closeNav()">×</a>
<a href="/"><i class="fas fa-home"></i></span> Home</a>
<a href="emojis.html"><i class="far fa-laugh-beam"></i> Emojis</a>
</div>
<button id="openbtn" onclick="openNav()">☰</button>The JavaScript is responsible for hiding and showing the open button when the sidebar is visible. I attempted setting a transitionDuration within it, but unfortunately, that also did not yield the desired results.