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

我对您的代码进行了一些更改，并在代码中为我更改或添加的行添加了 cmets。

• 首先，在您的 HTML 文件中，我向按钮添加了一个 ID。
• 其次，在 你的 CSS 文件，我从 .openbtn 类中删除了 color: white
• 第三，我在您的 JS 文件中添加了两行（参见代码中的 cmets）

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>