如何为通过函数动态注入的移动端侧边导航栏添加滑入滑出动画

我懂你的困扰：用动态注入做了可复用的导航栏，想给移动端侧边栏加滑入滑出动画，但之前用display: none/grid切换类的时候，CSS过渡完全不生效对吧？这是因为display属性的变化是瞬间的，CSS的transition对它完全不起作用——咱们得换个思路，用支持过渡的属性来实现显示隐藏。

下面是具体的解决步骤，直接改你的代码就行：

第一步：调整CSS，用transform替代display控制显示隐藏 #

把你之前控制侧边栏显示的display逻辑，换成transform（控制位置）和opacity（控制透明度），这两个属性是支持CSS过渡的。修改后的CSS如下：

/* 侧边栏基础样式：初始状态滑出屏幕右侧 */
.navbaritensmobile {
  position: fixed;
  top: 64px;
  height: calc(100% - 64px);
  border-radius: 5% 0 0 5%;
  width: 200px;
  /* 初始位置：向右移出屏幕，数值和宽度一致 */
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none; /* 隐藏时不响应点击，避免误触 */
  display: grid;
  grid-template-rows: repeat(6, auto);
  gap: 1rem; /* 给菜单项加间距，更美观 */
  background-color: #242738;
  padding: 20px;
  padding-top: 64px;
  box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
  z-index: 8888;
  /* 指定要过渡的属性和动画时长，ease-in-out是缓动效果 */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* 侧边栏打开状态：滑入屏幕 */
.navbaritensmobile.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto; /* 显示时恢复点击 */
}

/* 侧边栏关闭状态：回到初始位置 */
.navbaritensmobile.closed {
  transform: translateX(100%);
  opacity: 0;
}

/* 移动端媒体查询：只保留必要的显示控制，侧边栏的显示交给上面的transform */
@media (max-width: 960px) {
  .navbarmenuhamburger {
    display: block;
  }
  .navbaritens3 {
    display: none;
  }
  /* 删掉之前用display控制.closed/.open的代码 */
}

第二步：简化JS的toggle函数，确保类切换正确 #

之前的函数里有一些类名不一致的小问题（比如normalshape和regularshape），咱们简化一下，用toggle方法直接切换类，更简洁：

function toggleMobileMenu() {
  const navbarItensMobile = document.querySelector(".navbaritensmobile");
  const hamburgerButton = document.querySelector(".navbarmenuhamburger");
  
  // 先判断元素是否存在，避免报错
  if (!navbarItensMobile || !hamburgerButton) {
    console.error("导航栏元素未找到！");
    return;
  }

  // 一键切换侧边栏的打开/关闭类
  navbarItensMobile.classList.toggle('open');
  navbarItensMobile.classList.toggle('closed');

  // 切换汉堡按钮的样式（确保类名和你的CSS对应，这里用xshape和regularshape）
  hamburgerButton.classList.toggle('xshape');
  hamburgerButton.classList.toggle('regularshape');
}

为什么这样改能生效？ #

• 放弃用display: none，改用transform: translateX(100%)把侧边栏移到屏幕外，这样元素其实一直存在，只是在视野外，CSS过渡能捕捉到位置变化的中间状态，从而实现滑入滑出。
• 加上opacity属性配合，动画会更流畅自然；pointer-events能保证隐藏时侧边栏不响应点击，避免用户误操作。
• 动态注入的元素完全不影响这个逻辑，只要DOM加载完成后能找到.navbaritensmobile元素，类切换和过渡就正常工作。

如果之后想改成从左侧滑入，只需要把transform: translateX(100%)改成transform: translateX(-100%)就行，非常灵活。

内容来源于stack exchange