html - 动画汉堡切换按钮无法正常工作
问题描述
我创建了一个带有引导程序的菜单,但删除了默认折叠类并添加了一个自定义类,该类使用绝对位置在单击切换按钮时显示菜单。
但是每当我单击按钮时,切换按钮的顶部和底部栏都会弹起并制作十字图标。它在使用折叠类时完美运行。CSS 似乎是正确的。单击按钮后没有位置变化。
const button = document.querySelector('button');
button.addEventListener('click', () => {
button.ariaExpanded = !JSON.parse(button.ariaExpanded);
});
.custom {
color: #fff;
background-color: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0000004f), to(#00000000));
background-image: linear-gradient(180deg, #0000004f 0%, #00000000 100%);
padding-top: 1.5rem;
z-index: 99;
}
.custom .title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.custom .title a {
font-family: "Tinos", serif;
color: #fff;
text-decoration: none;
line-height: 1.3;
}
.custom .title .main-title {
font-size: 30px;
}
@media only screen and (max-width: 576px) {
.custom .title .main-title {
font-size: 20px;
}
}
.custom .title .sub-title {
font-size: 20px;
}
@media only screen and (max-width: 576px) {
.custom .title .sub-title {
font-size: 20px;
}
}
.custom .menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-transform: uppercase;
}
@media only screen and (max-width: 576px) {
.custom .menu {
background-color: #e2e2e2;
color: black;
text-transform: capitalize;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.custom .menu a {
color: #fff;
}
@media only screen and (max-width: 576px) {
.custom .menu a {
color: black;
margin-left: 1.5rem;
text-transform: capitalize;
}
}
.custom .menu .secondary {
font-size: 13px;
}
@media only screen and (max-width: 576px) {
.custom .menu .secondary {
color: black;
font-family: "Cormorant Garamond", serif;
font-size: 1rem;
}
}
.custom .menu .secondary ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-bottom: 0;
}
@media only screen and (max-width: 576px) {
.custom .menu .secondary ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
}
}
.custom .menu .secondary ul li {
margin-left: 1.5rem;
list-style: none;
letter-spacing: 1.55px;
}
@media only screen and (max-width: 576px) {
.custom .menu .secondary ul li {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin-left: 0;
border-bottom: 1px solid #80808070;
}
.custom .menu .secondary ul li:last-child {
border-bottom: none;
}
}
.custom .menu .primary {
font-size: 19px;
margin-top: 0.313rem;
}
@media only screen and (max-width: 576px) {
.custom .menu .primary {
color: black;
font-family: "Cormorant Garamond", serif;
font-size: 1rem;
}
}
.custom .menu .primary ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-bottom: 0;
}
@media only screen and (max-width: 576px) {
.custom .menu .primary ul {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
}
}
.custom .menu .primary ul li {
margin-left: 1.5rem;
list-style: none;
letter-spacing: 2px;
}
@media only screen and (max-width: 576px) {
.custom .menu .primary ul li {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin-left: 0;
border-bottom: 1px solid #80808070;
}
.custom .menu .primary ul li:last-child {
padding: 0;
}
.custom .menu .primary ul li:nth-last-child(2) {
border-bottom: none;
}
}
.custom .menu .primary ul li i {
font-size: 15px;
}
@media only screen and (max-width: 576px) {
.custom .menu .primary ul li i {
display: none;
}
}
@media only screen and (max-width: 576px) {
.custom .mobile-menu {
display: none;
position: fixed;
top: 6.25rem;
left: 0;
width: 100%;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
}
.custom .show-mobile-menu {
display: block;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.navbar-toggler.x:focus {
outline: none;
box-shadow: none;
}
.navbar-toggler.x[aria-expanded='true'] .icon-bar:nth-of-type(1) {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggler.x[aria-expanded='true'] .icon-bar:nth-of-type(2) {
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggler.x[aria-expanded='true'] .icon-bar:nth-of-type(3) {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggler.x .icon-bar {
width: 22px;
display: block;
height: 2px;
background-color: #fff;
transition: all 0.2s;
}
.navbar-toggler.x .icon-bar + .icon-bar {
margin-top: 4px;
}
.navbar-toggler.x .icon-bar:nth-of-type(1) {
transform: rotate(0);
}
.navbar-toggler.x .icon-bar:nth-of-type(2) {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar-toggler.x .icon-bar:nth-of-type(3) {
transform: rotate(0);
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg custom">
<div class="container">
<div class="title">
<a class="main-title" href="index"
>title</a
>
</div>
<button
class="navbar-toggler x"
type="button"
data-bs-toggle="mobile-menu"
data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="mobile-menu" id="navbarTogglerDemo01">
<div class="menu ms-auto">
<div class="secondary">
<ul>
<li>
<a aria-current="page" href="architecture"
>Architecture</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
解决方案
我将transform-origin
属性移到了基本的 CSS 中。当它后来被应用时,它的动画不知何故与其他动画不同。现在它工作正常。
const button = document.querySelector('button');
button.addEventListener('click', () => {
button.ariaExpanded = !JSON.parse(button.ariaExpanded);
});
.navbar-toggler.x:focus {
outline: none;
box-shadow: none;
}
.navbar-toggler.x[aria-expanded='true'] .icon-bar:nth-of-type(1) {
transform: rotate(45deg);
}
.navbar-toggler.x[aria-expanded='true'] .icon-bar:nth-of-type(2) {
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggler.x[aria-expanded='true'] .icon-bar:nth-of-type(3) {
transform: rotate(-45deg);
}
.navbar-toggler.x .icon-bar {
width: 22px;
display: block;
height: 2px;
background-color: #fff;
transition:all 0.2s;
}
.navbar-toggler.x .icon-bar + .icon-bar {
margin-top: 4px;
}
.navbar-toggler.x .icon-bar:nth-of-type(1) {
transform: rotate(0);
transform-origin: 10% 10%;
}
.navbar-toggler.x .icon-bar:nth-of-type(2) {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar-toggler.x .icon-bar:nth-of-type(3) {
transform: rotate(0);
transform-origin: 10% 90%;
}
<button class="navbar-toggler x" type="button" data-bs-toggle="mobile-menu" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
推荐阅读
- javafx - ListView 未在应用程序中显示项目。为什么不?
- python-3.x - 分配名称时井字游戏中的语法错误
- r - 在 R 中可视化汇总统计
- node.js - Nightmarejs“意外的令牌......”
- java - 带有排序时间戳降序的Android Firestore多值查询
- php - 如何检查固定字符串是否包含任何附加字符?
- javascript - React setState 不会重新渲染
- bash - 将具有多个数据条目的行扩展为单独的行,每个行包含一个数据
- java - 尝试在 IntelliJ Idea 中安装 scala SDK 时出错
- php - 如何将 CSS 属性值更改为元素的值?