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>