Question

我有这个动画可伸缩菜单栏。我做了两个菜单栏。当单击图标时滑出一个，另一个滑入。我使用hidden-sidenav将关闭导航的转换延迟更改为零，因此扩展导航将等待1秒以使关闭导航完成缩回。

我不喜欢的转变是移动的图标。这是因为我为每个导航栏都有一个box-sizing属性和填充。我使用box-sizing来使图标居中。但我希望效果像this。请注意导航栏中的链接是如何保持固定的。

function closeIt(){
  document.getElementById('mysidenav').classList.add('hidden-sidenav');
  document.getElementById('mysidenav2').classList.remove('hidden-sidenav');
}
function openIt(){
  document.getElementById('mysidenav').classList.remove('hidden-sidenav');
  document.getElementById('mysidenav2').classList.add('hidden-sidenav');
}

*{
  margin:0;
  padding:0;
}
html,body{
  height:100%;
  width:100%;
}
.sidenav{
  height:100%;
  width:20%;
  background:#111;
  transition:1s;
  transition-delay:1s;
  transition-timing-function:ease-out;
  overflow-x:hidden;
  box-sizing:border-box;
  padding:calc((20% - 50px)/2);
}
.sidenav a{
  font-size:90px;
  color:#818181;
}
/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/
.sidenav2{
  height:100%;
  width:20%; /* Changed to 20%: visible by default. */
  background:#111;
  overflow-x:hidden;
  position:fixed;
  top:0;
  transition:1s;
  transition-timing-function:ease-out;
  transition-delay:1s;
  box-sizing:border-box;
  padding:calc((20% - 50px)/2);
}
.sidenav2 a {
  font-size:50px;
  color:#818181;
}
.hidden-sidenav { /* Must come after .sidenav and .sidenav2 to override them. */
  transition-delay:0s;
  transition-timing-function:ease-in;
  width:0;
  padding:0;
}

<div id='mysidenav'class='sidenav hidden-sidenav'>
  <a onclick='closeIt()'>&times</a>
</div>
    
<div id='mysidenav2'class='sidenav2'>
  <a onclick='openIt()'>&#9776</a>
</div>

Answer 1

为了修复图标，我刚刚添加了

position:absolute;
left:15px;

到

.sidenav a
.sidenav2 a

我也删除了填充计算并使位置绝对。由于字体大小不同，我也把

top:12px;

到

.sidenav2 a

希望这有帮助。

function closeIt(){
  document.getElementById('mysidenav').classList.add('hidden-sidenav');
  document.getElementById('mysidenav2').classList.remove('hidden-sidenav');
  
}
function openIt(){
  document.getElementById('mysidenav').classList.remove('hidden-sidenav');
  document.getElementById('mysidenav2').classList.add('hidden-sidenav');
}


setIconPositions('mysidenav');
setIconPositions('mysidenav2');

function setIconPositions(parentElement) {
var element = document.getElementById(parentElement);
var positionInfo = element.getBoundingClientRect();
var width = positionInfo.width;

var closeIcon = document.getElementById('close-icon');
var openIcon = document.getElementById('open-icon');

closeIcon.style.left = (width/2-getWidthOfText(closeIcon.text, window.getComputedStyle(closeIcon).fontFamily,
window.getComputedStyle(closeIcon).fontSize)/2)+"px";

openIcon.style.left = (width/2-getWidthOfText(openIcon.text, window.getComputedStyle(openIcon).fontFamily,
window.getComputedStyle(openIcon).fontSize)/2)+"px";
}

function getWidthOfText(txt, fontname, fontsize){
    if(getWidthOfText.c === undefined){
        getWidthOfText.c=document.createElement('canvas');
        getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
    }
    getWidthOfText.ctx.font = fontsize + ' ' + fontname;
    return getWidthOfText.ctx.measureText(txt).width;
}

*{
  margin:0;
  padding:0;
}
html,body{
  height:100%;
  width:100%;
}
.sidenav{
  height:100%;
  width:30%;
  background:#111;
  transition:1s;
  transition-delay:1s;
  transition-timing-function:ease-out;
  overflow-x:hidden;
  box-sizing:border-box;
  position:absolute;
  top:0;
}
.sidenav a{
  font-size:90px;
  color:#818181;
  position:absolute;
}


/*SECOND SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDEEEEEEE BAR*/
.sidenav2{
  height:100%;
  width:30%; /* Changed to 20%: visible by default. */
  background:#111;
  overflow-x:hidden;
  position:absolute;
  top:0;
  transition:1s;
  transition-timing-function:ease-out;
  transition-delay:1s;
  box-sizing:border-box;
}
.sidenav2 a {
  font-size:50px;
  color:#818181;
  top:12px;
  position:absolute;
}
.hidden-sidenav { /* Must come after .sidenav and .sidenav2 to override them. */
  transition-delay:0s;
  transition-timing-function:ease-in;
  width:0;
  padding:0;
}

<div id='mysidenav'class='sidenav hidden-sidenav'>
  <a id="close-icon" onclick='closeIt()' class='hidden-sidenav'>&times</a>
</div>
    
<div id='mysidenav2'class='sidenav2'>
  <a id="open-icon" onclick='openIt()' class='hidden-sidenav'>&#9776</a>
</div>

如何修复动画类的一部分？

1 个答案: