Having trouble setting a transition speed for this sidemenu

Question

I am new to web development and I am having trouble making a transition speed to open and close this side menu. The menu opens instantly even after adding a transition to the CSS and a duration to the Javascript. I did research before coming here, but nothing seemed to work. If one of ya'll could help out, that would be wonderful.

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 to hide and show the open button when the sidebar is visible. I tried to set a transitionDuration with it, but that also didn't work.

Triby · Answer 1 · 2020-02-09T08:37:27.490

You can't use transitions on display propperty, but you're already using width, so keep only with this one and it works fine. No need to change transition effects with Javascript, that's already defined in your CSS.

function openNav() {
    document.getElementById("mySidepanel").style.width = "250px";
    document.getElementById("openbtn").style.top = '-50px';
  }
  
function closeNav() {
    document.getElementById("mySidepanel").style.width = "0";

    document.getElementById("openbtn").style.top = '10px';
  }

/** 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;
  
  position:fixed;
  top:10px;
  right:10px;
  transition: all 0.5s ease-in-out;
}

#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">
   <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>

Edit: I've changed position to fixed and move the button up and down.

The transition now works perfectly. I do appreciate that. However, when clicking the X (close button), it then shows the ☰ (open button) underneath the X before the X disappears in about 0.5 seconds. Is there a way to work around that. Sorry if my explanation is terrible. — DevilDonkey, Feb 09 '20 at 07:59
@DevilDonkey, you can't use transitions on floated elements with just CSS, so, you can set it as fixed or absolute and play changing opacity to do the trick. BTW, your explanation was very clear. — Triby, Feb 09 '20 at 08:27
Awesome! Everything is now working as I have hoped. I really do appreciate the help Triby. Thank you kindly. — DevilDonkey, Feb 09 '20 at 08:29

Having trouble setting a transition speed for this sidemenu

1 Answers1