CSS过渡第一次不起作用

Posted 2023-03-07

【中文标题】CSS过渡第一次不起作用

【英文标题】：CSS transition not working for first time

【发布时间】：2021-01-29 02:56:49

【问题描述】：

我正在尝试创建一个右侧边栏，其中有一个打开按钮来打开侧边栏和一个取消按钮。单击打开按钮时，侧边栏将与 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" >
        <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>

【问题讨论】：

出现 JS 错误，因为您尝试将样式应用于 id = header 的元素，而该元素不在您的 html 代码中...

@Alessio 我已经编辑了我的代码。请立即查看

【参考方案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" >
        <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>

【讨论】：

它在 sn-p 中工作，但在主项目中仍然不工作