动画汉堡切换按钮无法正常工作答案

【问题标题】：Animated Hamburger toggle button not not working properly动画汉堡切换按钮无法正常工作
【发布时间】：2021-10-01 18:18:38
【问题描述】：

我创建了一个带有引导程序的菜单，但删除了默认折叠类，并添加了一个自定义类，该类使用绝对位置在单击切换按钮时显示菜单。

但是每当我单击按钮时，切换按钮的顶部和底部栏都会弹跳并制作十字图标。它在使用折叠类时完美运行。 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>

【问题讨论】：

我不太清楚你想看到什么 - 是汉堡保持为汉堡而不创建十字架吗？
它应该交叉，但正如您在交叉时看到的那样，上下栏会产生小反弹。 @AHaworth 运行代码。动画应该在那里。

标签： html css twitter-bootstrap frontend

【解决方案1】：

我将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>

【讨论】：

【解决方案2】：

如果我们只变换旋转而不变换定位，则有时元素的位置会稍有错误。

这个 sn-p 的目的是使每个条的中心位于汉堡包的中心，并从其初始位置平滑地平移和旋转，而不会有轻微的“跳跃”。旋转围绕每个条的中心。

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) translateX(4px) translateY(4px);
    transform-origin: 50% 50%;
}
.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) translateX(4px) translateY(-4px);
    transform-origin: 50% 50%;
}
.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) translateX(0) translateY(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) translateX(0) translateY(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>

【讨论】：