如何固定動畫課的一部分？

Question

我有這個動畫的可伸縮菜單欄。 我做了兩個菜單欄。 當單擊圖標時一個滑出時，另一個滑入。我使用hidden-sidenav將關閉導航的過渡延遲更改為零，因此展開的導航將等待1s，以使關閉導航完成縮回。

我不喜歡的過渡是移動的圖標。 這是因為我有一個box-sizing屬性和每個導航欄的填充。 我使用框大小將圖標居中。 但我想般的效果這樣 。 注意導航欄中的鏈接如何保持固定。

 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>