替换Bootstrap默认collapse类后带动画的汉堡切换按钮工作异常

问题原因 #

你遇到的按钮横条弹跳问题来自两个核心冲突：

1. 图标动画的transform-origin没有设置默认值，仅在aria-expanded=true时才指定旋转原点，导致0.2s过渡期间原点会从默认的中心位置向你设置的10%位置过渡，最终表现为横条弹跳。
2. 你同时给按钮添加了data-bs-toggle自定义值和自定义点击事件，Bootstrap原生JS会识别data-bs-*属性尝试执行内置交互逻辑，和你手动修改aria-expanded的逻辑冲突，导致状态更新异常。
   另外你当前移动端菜单用display:none/block切换，transition属性不会生效，菜单弹出会没有过渡效果。

修复方案 #

1. 修正图标动画 #

给.icon-bar提前设置默认的旋转原点，避免过渡时原点变化：

.navbar-toggler.x .icon-bar {
    width: 22px;
    display: block;
    height: 2px;
    background-color: #fff;
    transition: all 0.2s;
    /* 新增默认原点，和第一根横条激活态一致 */
    transform-origin: 10% 10%;
}
/* 单独给第三根横条设置默认原点 */
.navbar-toggler.x .icon-bar:nth-of-type(3) {
    transform: rotate(0);
    transform-origin: 10% 90%;
}

2. 移除JS逻辑冲突 #

删除按钮标签上的data-bs-toggle="mobile-menu"和data-bs-target="#navbarTogglerDemo01"属性，避免Bootstrap原生JS干扰自定义交互。
同时修改你的自定义JS逻辑，同步控制菜单的显隐类：

const button = document.querySelector('button');
const mobileMenu = document.getElementById('navbarTogglerDemo01');

button.addEventListener('click', () => {
    const expanded = !JSON.parse(button.ariaExpanded);
    button.ariaExpanded = expanded;
    mobileMenu.classList.toggle('show-mobile-menu', expanded);
});

3. 修复菜单过渡（可选） #

如果需要菜单弹出有平滑过渡，把display切换改为支持过渡的属性：

@media only screen and (max-width: 576px) {
  .custom .mobile-menu {
    position: fixed;
    top: 6.25rem;
    left: 0;
    width: 100%;
    transition: all 0.2s;
    /* 替换display:none */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
  }
}

.custom .show-mobile-menu {
  transition: all 0.2s;
  /* 替换display:block */
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

内容的提问来源于stack exchange，提问作者tru_shar