点击汉堡按钮时右侧侧边栏滑入过渡失效的问题求助

你的推测完全正确：.navbar__sidebar-wrapper从display:none切换到flex时，浏览器会直接重建该元素的渲染上下文，子元素.navbar__sidebar的初始left:100%状态根本没被渲染，自然无法触发过渡动画。下面是几个可行的修复方案：

方案一：用visibility+opacity+height替代display:none控制wrapper显隐 #

核心是让wrapper始终存在于渲染树中，通过可见性和透明度控制显示，避免display切换导致的渲染重建：

.navbar__main-container {
  position: relative;
  &.show {
    height: 100vh;
  }
}

.navbar__sidebar-wrapper {
  /* 移除display:none，改用以下属性控制显隐 */
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
  /* 保留原有布局样式 */
  justify-content: flex-end;
  background-color: #1D1D1D33;
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  z-index: 10000;
  /* 过渡配置：隐藏时先等透明度消失再收起高度 */
  transition: visibility 0s 0.3s, opacity 0.3s, height 0s 0.3s;
}

.navbar__sidebar-wrapper.show {
  visibility: visible;
  opacity: 1;
  height: calc(100% - 64px);
  display: flex;
  /* 显示时立即展开高度，同时过渡透明度 */
  transition: visibility 0s, opacity 0.3s, height 0s;
}

.navbar__sidebar {
  position: relative;
  left: 100%;
  /* 保留原有样式 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  gap: 8px;
  width: 375px;
  height: 100%;
  background-color: tokens.$color-bg-white;
  flex: none;
  order: 1;
  flex-grow: 0;
  transition: left 1s;
}

.navbar__sidebar-wrapper.show .navbar__sidebar {
  left: 0;
}

JS代码无需修改，切换show类后，wrapper会先显示并过渡透明度，子元素的left过渡会正常触发。

方案二：延迟切换子元素的show类 #

利用浏览器重绘队列，让wrapper先完成display:flex的渲染，再触发子元素的过渡：

handleSidebar(el) {
  const mainContainer = el.currentTarget.closest('.navbar__main-container');
  const sidebarWrapper = mainContainer.querySelector('.navbar__sidebar-wrapper');
  const navbarWrapper = sidebarWrapper.querySelector('.navbar__sidebar');
  
  mainContainer.classList.toggle('show');
  sidebarWrapper.classList.toggle('show');
  
  // 延迟10ms，让浏览器先完成wrapper的渲染
  setTimeout(() => {
    navbarWrapper.classList.toggle('show');
  }, 10);
}

这个方案改动最小，仅调整JS逻辑，缺点是可能存在极细微的感知延迟，但大部分场景下完全可以接受。

方案三：用transform控制侧边栏位置，wrapper始终保持display:flex #

放弃display切换，让wrapper一直存在，通过opacity、z-index和pointer-events控制显隐和交互，同时用性能更好的transform实现滑入：

.navbar__main-container {
  position: relative;
  &.show {
    height: 100vh;
  }
}

.navbar__sidebar-wrapper {
  display: flex; /* 始终保持flex */
  justify-content: flex-end;
  background-color: #1D1D1D33;
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  height: calc(100% - 64px);
  z-index: -1; /* 默认隐藏在底层 */
  pointer-events: none; /* 默认不可交互 */
  opacity: 0;
  transition: opacity 0.3s;
}

.navbar__sidebar-wrapper.show {
  z-index: 10000;
  pointer-events: auto;
  opacity: 1;
}

.navbar__sidebar {
  position: relative;
  transform: translateX(100%); /* 用transform替代left */
  /* 保留原有样式 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  gap: 8px;
  width: 375px;
  height: 100%;
  background-color: tokens.$color-bg-white;
  flex: none;
  order: 1;
  flex-grow: 0;
  transition: transform 1s;
}

.navbar__sidebar-wrapper.show .navbar__sidebar {
  transform: translateX(0); /* 依赖wrapper的show类触发过渡 */
}

此时JS只需切换mainContainer和sidebarWrapper的show类，无需单独处理子元素，同时transform的过渡性能优于left，还能避免display切换的问题。

你之前尝试transform无效，大概率是因为wrapper仍用了display:none，导致transform的初始状态未被浏览器渲染，改成上述方式即可解决。

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