CSS 過渡第一次不起作用

Question

我正在嘗試創建一個右側邊欄，其中有一個打開按鈕可以打開側邊欄和一個取消按鈕。 當單擊打開按鈕時，側邊欄將與 3 個部分一起向左滑動。 部分也將向左滑動並為側邊欄騰出空間，當單擊取消按鈕時，一切都會再次正常，但 CSS 轉換在我第一次加載網站時不起作用。 我用了

transition: all 0.3s;

屬性，但在第一次 CSS 轉換后仍然每次都有效。 我現在該怎么辦，請幫我解決問題

 function openNav() { document.getElementById("mySidebar").style.marginRight = "0"; document.getElementById("header").style.marginLeft = "-300px"; document.getElementById("header-slider").style.marginLeft = "-300px"; } function closeNav() { document.getElementById("mySidebar").style.marginRight = "-300px"; document.getElementById("header").style.marginLeft = "0"; document.getElementById("header-slider").style.marginLeft = "0"; }

 .sidebar { height: 100%; width: 300px; margin-right: -300px; position: fixed; z-index: 1; top: 0; right: 0; background-color: var(--second-color); overflow-x: hidden; transition: all 0.3s; } .sidebar img { width: 80%; height: auto; margin: 30px; margin-top: 100px; } .sidebar a { text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidebar p { margin: 30px; font-family: Arial; font-size: 16px; font-weight: 200; line-height: 1.8; color: var(--white-color); display: block; transition: 0.3s; } .sidebar a.closebtn:hover { color: var(--main-color); } .sidebar .closebtn { position: absolute; top: 0; right: 20px; font-size: 50px; } .openbtn { font-size: 23px; cursor: pointer; color: white; background: var(--second-color); border: none; float: right; } .openbtn:hover { color: var(--main-color); } .openbtn:focus { color: var(--main-color); } #main { transition: margin-right .3s; float: right; }

 <div id="header"> <div class="collaps"> <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <img src="assets/images/side-area.png" alt=""> <p class="text-justify">Legimus intellegam ea est, tamquam appellantur nec ei. Dicant perfecto deserunt quo id, ea etiam impetus pri. Mel ne vidit laboramus definiebas, quo esse aeterno</p> </div> <div id="main"> <button class="openbtn" onclick="openNav()">☰</button> </div> </div> </div> <div id="header-slider"></div>

Answer 1

我對您的代碼進行了一些更改，並在代碼中為我更改或添加的行添加了注釋。

• 首先，在您的 HTML 文件中，我向按鈕添加了一個 ID。
• 其次，在您的 CSS 文件中，我從.openbtn類中刪除了color: white
• 第三，我在您的 JS 文件中添加了兩行（請參閱代碼中的注釋）

 function openNav() { document.getElementById("mySidebar").style.marginRight = "0"; document.getElementById("header").style.marginLeft = "-300px"; document.getElementById("header-slider").style.marginLeft = "-300px"; document.getElementById("header-slider").style.marginLeft = "-300px"; // Add this line document.getElementById("openbtn").style.display = "none"; } function closeNav() { document.getElementById("mySidebar").style.marginRight = "-300px"; document.getElementById("header").style.marginLeft = "0"; document.getElementById("header-slider").style.marginLeft = "0"; // Add this line document.getElementById("openbtn").style.display = "block"; }

 .sidebar { height: 100%; width: 300px; margin-right: -300px; position: fixed; z-index: 1; top: 0; right: 0; background-color: var(--second-color); overflow-x: hidden; transition: all 0.3s; } .sidebar img { width: 80%; height: auto; margin: 30px; margin-top: 100px; } .sidebar a { text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidebar p { margin: 30px; font-family: Arial; font-size: 16px; font-weight: 200; line-height: 1.8; color: var(--white-color); display: block; transition: 0.3s; } .sidebar a.closebtn:hover { color: var(--main-color); } .sidebar .closebtn { position: absolute; top: 0; right: 20px; font-size: 50px; } .openbtn { font-size: 23px; cursor: pointer; /* Comment out this line */ /* color: white; */ background: var(--second-color); border: none; float: right; } .openbtn:hover { color: var(--main-color); } .openbtn:focus { color: var(--main-color); } #main { transition: margin-right .3s; float: right; }

 <div id="header"> <div class="collaps"> <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <img src="assets/images/side-area.png" alt=""> <p class="text-justify">Legimus intellegam ea est, tamquam appellantur nec ei. Dicant perfecto deserunt quo id, ea etiam impetus pri. Mel ne vidit laboramus definiebas, quo esse aeterno</p> </div> <div id="main"> <!-- Add an ID to the button --> <button id="openbtn" class="openbtn" onclick="openNav()">☰</button> </div> </div> </div> <div id="header-slider"></div>