Text in a box suddenly appears instead of slowly showing-CodePudding

I have a side menu on my website, and one of the elements is two words long. I expected it to slowly appear just as the other elements, but instead, the second word appears all at once. If you want to check for yourself, the website is https://grazianofermi.altervista.org/SitoLogin/
Login information:
email: [email protected]
password: prova123

function sb() {
  var y = document.getElementById("hidden-check")

  if (y.checked) {
    document.getElementById("sidebar").style.width = "0"
  } else {
    document.getElementById("sidebar").style.width = "250px"
  }
}

div.sidebar {
  position: absolute;
  left: 0;
  width: 0;
  box-shadow: 0 0 15px #e96f26;
  margin-top: 100px;
  overflow: hidden;
  transition: 0.2s ease;
  background-color: white;
}

button.sidemenu {
  background-color: white;
  color: black;
  border-radius: 0;
  font-family: "Bebas Neue";
  width: 100%;
  height: 50px;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: 0.2s ease;
  margin: 0;
  font-size: 2vw;
  text-align: center;
}

button.sidemenu:hover {
  background-color: rgb(200, 200, 200);
}

img.sidemenu-icon {
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: white;
  box-shadow: 0 0 15px #e96f26;
  cursor: pointer;
  transition: 0.2s ease;
  width: 45px;
  border-radius: 5px;
  padding: 5px;
}

img.sidemenu-icon:hover {
  background-color: #e3e3e3;
}

input#hidden-check {
  display: none;
}

<input type="checkbox" id="hidden-check" name="hidden-check">

<label for="hidden-check" onclick="sb()">
    <img class="sidemenu-icon" src="sidemenuIcon.png" alt="icon">
</label>

<div class="sidebar" id="sidebar">
  <a href="index.html"><button class="sidemenu">HOMEPAGE</button></a>
  <a href="cambiaPass.php"><button class="sidemenu">CAMBIA PASSWORD</button></a>
  <a href="logout.php"><button class="sidemenu">LOGOUT</button></a>
</div>

CodePudding user response：

After checking your demo I still can see what you mean.

Maybe the problem is that when you close the drawer the two word element runs out of space and the second word gets pushed down. Then, when you open it, it starts bellow and when there is enough space it jumps back to the same line as the first word.

In general I would discourage changing the width of the element to hide it, it tends to produce that kind of weird looking transitions, and has poor performance. I would recommend instead that you use as your close state (on CSS)

transform: translateX(-<enough_pixels_to_hide_the_drawer>);
transition: transform 0.2s ease;

and to open it

transform: translateX(0)

CodePudding user response：

div.sidebar {
 transition: width ease 2s 0s;
}

CodePudding user response：

function sb() {
    var y = document.getElementById("hidden-check")

    if (y.checked) {
        document.getElementById("sidebar").classList.remove('active');/*change this line*/
    } else {
        document.getElementById("sidebar").classList.add('active');/*change this line*/
    }
}

div.sidebar {
    position: absolute;
    left: 0;
    width: 250px;/*change this line*/
    box-shadow: 0 0 15px #e96f26;
    margin-top: 100px;
    overflow: hidden;
    transition: 0.2s ease;
    background-color: white;
    transform: translateX(-280px);/*add this line*/
}

/*add*/
div.sidebar.active {
    transform: translateX(0px);
}