技术问询：点击按钮实现侧边栏移入屏幕及关闭时移出屏幕

Hey there! Let's fix up your sidebar slide-in/out functionality. I noticed a few issues in your original code that are keeping it from working smoothly—like incorrect DOM structure, missing transition animations, and using display: none which kills the exit animation. Here's the polished solution:

1. 修正后的HTML结构 #

首先调整DOM结构，把侧边栏和内容区域放在main-content下同级，这样布局逻辑更清晰，方便用flex控制：

<div class="main-content">
  <!-- 左侧内容区域 -->
  <div class="feed-post">
    <div class="some-content">
      <p>some text</p>
      <!-- 打开侧边栏的触发按钮 -->
      <button class="open-file-sidenav">Open Attachments</button>
    </div>
  </div>

  <!-- 右侧侧边栏容器 -->
  <div class="files-sidenav-wrap">
    <div class="d-flex justify-content-between align-items-center p-3">
      <h5 class="mb-0 font-weight-bold">Attachments</h5>
      <button type="button" class="close close-files-sidebar-btn"><span aria-hidden="true">&times;</span></button>
    </div>
    <!-- 在这里添加侧边栏的具体内容 -->
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. 关键CSS样式（带平滑过渡动画） #

核心是给侧边栏添加transition属性实现动画，同时设置正确的transform值控制滑入滑出：

/* 主容器使用flex布局，隐藏超出部分 */
.main-content {
  display: flex;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

/* 内容区域默认占满剩余宽度 */
.feed-post {
  flex: 1;
  padding: 1.5rem;
  transition: padding 0.3s ease; /* 内容区域随侧边栏同步过渡 */
}

/* 侧边栏基础样式：默认滑出屏幕右侧 */
.files-sidenav-wrap {
  width: 250px;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease; /* 核心动画过渡 */
  transform: translateX(100%);
}

/* 侧边栏滑入状态：回到屏幕内 */
.file-sidenav-slidein {
  transform: translateX(0);
}

/* 侧边栏滑出状态：回到默认位置 */
.file-sidenav-slideout {
  transform: translateX(100%);
}

/* 内容区域适配侧边栏打开的状态 */
.content-on-files-sidenav-open {
  padding-right: 260px; /* 给侧边栏留出宽度+小间距 */
}

.content-on-files-sidenav-closed {
  padding-right: 1.5rem;
}

/* 按钮样式美化（可选） */
.open-file-sidenav {
  margin-top: 1rem;
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

.close-files-sidebar-btn {
  font-size: 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

3. 简化后的JavaScript逻辑 #

去掉了冗余的display设置，用transform控制显示状态，保证动画完整播放：

// 打开侧边栏
$(".open-file-sidenav").click(function(){
  $(".files-sidenav-wrap").addClass("file-sidenav-slidein").removeClass("file-sidenav-slideout");
  $(".feed-post").addClass("content-on-files-sidenav-open").removeClass("content-on-files-sidenav-closed");
});

// 关闭侧边栏
$(".close-files-sidebar-btn").click(function(){
  $(".files-sidenav-wrap").removeClass("file-sidenav-slidein").addClass("file-sidenav-slideout");
  $(".feed-post").removeClass("content-on-files-sidenav-open").addClass("content-on-files-sidenav-closed");
});

核心改进点说明 #

• DOM结构优化：侧边栏不再嵌套在内容区域内，和内容区域同级的结构更符合布局逻辑，避免样式冲突。
• 平滑过渡动画：通过transition属性实现丝滑的滑入滑出效果，替换了直接设置display: none的粗暴方式，保证动画完整展示。
• 合理定位：侧边栏用绝对定位固定在右侧，默认通过transform: translateX(100%)完全移出屏幕，滑入时回到可视区域。
• 简化逻辑：移除了不必要的样式操作，让代码更简洁易维护。

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