无法为此侧边菜单设置过渡速度[重复]

Posted 2023-03-05

【中文标题】无法为此侧边菜单设置过渡速度[重复]

【英文标题】：Having trouble setting a transition speed for this sidemenu [duplicate]

【发布时间】：2020-05-24 19:45:47

【问题描述】：

我是 Web 开发的新手，在打开和关闭此侧菜单的转换速度方面遇到了问题。即使在向 CSS 添加过渡和向 javascript 添加持续时间后，菜单也会立即打开。我来这里之前做过研究，但似乎没有任何效果。 如果你们中的一个人能帮忙，那就太好了。

function openNav() 
    document.getElementById("mySidepanel").style.width = "250px";
	document.getElementById("mySidepanel").style.transitionDuration = "0.5s";
    document.getElementById("mySidepanel").style.display = "block";
    document.getElementById("openbtn").style.display = 'none';
  
  
function closeNav() 
    document.getElementById("mySidepanel").style.width = "0";
	document.getElementById("mySidepanel").style.transitionDuration = "0.5s";
    document.getElementById("mySidepanel").style.display = "none";
    document.getElementById("openbtn").style.display = "inline-block";
  

/** Navigation Bar **/

.sidepanel 
  width: 0;
  position: fixed;
  z-index: 1;
  height: 100%;
  top: 0;
  right: 0;
  background-color: rgba(17, 17, 17, 0.425);
  overflow-x: hidden;
  padding-top: 60px;
  transition: all 0.5s ease-in-out;


.sidepanel a 
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  font-family: "lato", sans-serif;
  color: #818181;
  display: block;


.sidepanel a:hover 
  color: #f1f1f1;


.sidepanel #closebtn 
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 36px;
  margin-left: 50px;


#openbtn 
  font-size: 30px;
  cursor: pointer;
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 10px 15px;
  border: none;
  float: right;


#openbtn:hover 
  background: -webkit-linear-gradient(#748df0c9, #324dbbc9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;


a:hover .fas 
  color: #3e5ddac9;
  text-shadow: 0 0 5px #3e5ddac9;

a:hover .far 
  color: #3e5ddac9;
  text-shadow: 0 0 5px #3e5ddac9;

<div id="mySidepanel" class="sidepanel" style="display: none;">
   <a href="javascript:void(0)" id="closebtn" onclick="closeNav()">×</a>
   <a href="/"><i class="fas fa-home"></i></span> Home</a>
   <a href="emojis.html"><i class="far fa-laugh-beam"></i> Emojis</a>
</div>
  
<button id="openbtn" onclick="openNav()">☰</button>

javascript是在侧边栏可见时隐藏和显示打开按钮。 我尝试用它设置一个transitionDuration，但这也没有用。

【参考方案1】：

您不能在显示属性上使用过渡，但您已经在使用宽度，所以只保留这个，它工作正常。无需使用 Javascript 更改过渡效果，这已在您的 CSS 中定义。

function openNav() 
    document.getElementById("mySidepanel").style.width = "250px";
    document.getElementById("openbtn").style.top = '-50px';
  
  
function closeNav() 
    document.getElementById("mySidepanel").style.width = "0";

    document.getElementById("openbtn").style.top = '10px';
  

/** Navigation Bar **/

.sidepanel 
  width: 0;
  position: fixed;
  z-index: 1;
  height: 100%;
  top: 0;
  right: 0;
  background-color: rgba(17, 17, 17, 0.425);
  overflow-x: hidden;
  padding-top: 60px;
  transition: all 0.5s ease-in-out;


.sidepanel a 
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  font-family: "lato", sans-serif;
  color: #818181;
  display: block;


.sidepanel a:hover 
  color: #f1f1f1;


.sidepanel #closebtn 
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 36px;
  margin-left: 50px;


#openbtn 
  font-size: 30px;
  cursor: pointer;
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 10px 15px;
  border: none;
  
  position:fixed;
  top:10px;
  right:10px;
  transition: all 0.5s ease-in-out;


#openbtn:hover 
  background: -webkit-linear-gradient(#748df0c9, #324dbbc9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;


a:hover .fas 
  color: #3e5ddac9;
  text-shadow: 0 0 5px #3e5ddac9;

a:hover .far 
  color: #3e5ddac9;
  text-shadow: 0 0 5px #3e5ddac9;

<div id="mySidepanel" class="sidepanel">
   <a href="javascript:void(0)" id="closebtn" onclick="closeNav()">×</a>
   <a href="/"><i class="fas fa-home"></i></span> Home</a>
   <a href="emojis.html"><i class="far fa-laugh-beam"></i> Emojis</a>
</div>
  
<button id="openbtn" onclick="openNav()">☰</button>

编辑：我已将位置更改为固定并上下移动按钮。

【讨论】：

过渡现在完美运行。我很感激。但是，当单击 X（关闭按钮）时，它会在 X 的下方显示☰（打开按钮），然后 X 会在大约 0.5 秒内消失。有没有办法解决这个问题。对不起，如果我的解释很糟糕。

@DevilDonkey，您不能仅使用 CSS 对浮动元素使用过渡，因此，您可以将其设置为固定或绝对并播放改变不透明度来达到目的。顺便说一句，你的解释很清楚。

太棒了！现在一切都像我希望的那样工作。我真的很感谢 Triby 的帮助。非常感谢。