CSS转换第一次不起作用

Question

我正在尝试创建一个右侧边栏，其中有一个打开按钮来打开边栏，还有一个取消按钮。当点击打开按钮时，侧边栏将与3部分一起向左滑动。部分也会向左滑动，为侧边栏腾出一个空闲空间，当点击取消按钮时，一切都会恢复正常，但CSS转换在我第一次加载网站时不起作用。我使用了

转换：全部为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

我认为您使用的浏览器不是Google Chrome

如果你使用其他浏览器，那么你应该在转换之前添加这行代码

-webkit-transition: all 0.3s;

Answer 2

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

• 首先，在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>