框中的文本突然出現而不是緩慢顯示-有解無憂

我的網站上有一個側邊選單，其中一個元素有兩個字長。我原以為它會像其他元素一樣慢慢出現，但相反，第二個詞一下子出現了。如果要自己查，網址是https://grazianofermi.altervista.org/SitoLogin/
登錄資訊：
郵箱：[email protected]
密碼：prova123

HTML

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

CSS

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;
}

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

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

uj5u.com熱心網友回復：

檢查您的演示后，我仍然可以理解您的意思。

也許問題是當您關閉抽屜時，兩個單詞元素用完空間，第二個單詞被按下。然后，當您打開它時，它會從下面開始，當有足夠的空間時，它會跳回到與第一個單詞相同的行。

一般來說，我不鼓勵改變元素的寬度來隱藏它，它往往會產生那種看起來很奇怪的過渡，并且性能很差。我建議您使用作為關閉狀態（在 CSS 上）

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

并打開它

transform: translateX(0)

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

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);
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/369122.html

標籤：javascript html css

上一篇：將物件轉換為URL

下一篇：檢查陣列中的數字是否為冪數