如何使动画类的一部分被修复？
如何使动画类的一部分被修复？
提问于 2017-09-01 02:03:12
我有这个动画的可伸缩菜单栏。我做了两个菜单栏。当单击图标时，其中一个滑出，另一个滑行。我使用隐侧导航将关闭导航的转换延迟更改为零，因此扩展导航将等待1s关闭导航以完成回缩。
我不喜欢的过渡是移动的图标。这是因为我有一个盒子大小属性和填充每个导航条。我使用盒子大小来居中图标。但我想要像这那样的效果。注意导航栏中的链接是如何固定的。
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()'>×</a>
</div>
<div id='mysidenav2'class='sidenav2'>
<a onclick='openIt()'>☰</a>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-01 03:40:03
为了使图标得到修正，我刚刚添加了
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'>×</a>
</div>
<div id='mysidenav2'class='sidenav2'>
<a id="open-icon" onclick='openIt()' class='hidden-sidenav'>☰</a>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45992404
复制相关文章
相似问题
腾讯云开发者
