如何解决转换属性适用于汉堡按钮,但在隐藏/显示时不适用于具有“移动”类的菜单
我遇到了 request-body.
属性适用于汉堡但不适用于菜单的问题。它隐藏/显示没有过渡效果。
transition
.top-menu .burger-menu {
width: 35px;
height: 5px;
background: var(--text-dark-blue);
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
border-radius: 4px;
transition: all .2s ease-in-out.2s;
}
.top-menu .burger-menu:before {
content: '';
display: block;
width: 35px;
height: 5px;
background: var(--text-dark-blue);
position: absolute;
top: -10px;
border-radius: 4px;
transition: all .2s ease-in-out.2s;
}
.top-menu .burger-menu:after {
content: '';
display: block;
width: 35px;
height: 5px;
background: var(--text-dark-blue);
position: absolute;
bottom: -10px;
border-radius: 4px;
transition: all .2s ease-in-out.2s;
}
.top-menu .burger-menu.open:before {
transform: rotate(45deg);
top: 0;
transition: all .2s ease-in-out.2s;
}
.top-menu .burger-menu.open:after {
transform: rotate(-45deg);
bottom: 0;
transition: all .2s ease-in-out.2s;
}
.top-menu .burger-menu .mobile {
display: none;
transition: all .2s ease-in-out.2s;
}
.top-menu .burger-menu.open {
background: 0;
transition: all .2s ease-in-out.2s;
}
.top-menu .burger-menu.open .mobile {
display: block;
position: absolute;
top: 25px;
left: -63px;
}
.top-menu .burger-menu.open .mobile ul li a {
background: var(--text-dark-blue);
color: #fff;
display: block;
min-width: 250px;
font-size: 30px;
line-height: 35px;
padding: 10px;
}
.top-menu .burger-menu.open .mobile ul li a:hover {
background-color: var(--text-light-blue);
text-decoration: none;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。