如何为响应式侧边菜单添加左右滑动开合动画

我有一个简单的布局，希望给菜单添加开合时的左右滑动过渡动画。以下是我的代码：

HTML代码 #

<body>
<div class="header">
      <a href="" id="MenueIcon" class="MenueIcon">
      menue
    </a>
  </div>

  <div class="sub_container">
<div id="sidebar" class="sidebar">
          <div id="closeMenueIcon" class="closeMenueIcon">
          X
        </div>
</div>
    <div id="white_backcolor" class="white_backcolor">
      <div id="content_space"></div>
    </div>
  </div>
  </body>

CSS代码 #

body {
  display: flex;
  flex-direction: column;
  border: none;
  outline: 0;
  margin: 0;
  height: 100vh;
  width: 100wh;
}

.header{  
display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 align-items: center;
 position: sticky;
 top: 0;
 right: 0;
 left: 0;
 padding: 0 10px;
  margin: 0;
  height: 60px;
  width: 100%;
  background-color: gray;
  z-index: 2;
}

.sub_container {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  margin:0;
}

.sidebar {
  display: flex; flex-direction: column; flex-wrap: nowrap; flex-grow: 1;
  background-color: lightblue;
  padding: 5px;
  margin: 0;
}

.white_backcolor {
  display: flex; flex-direction: column; flex-wrap: nowrap; flex-grow: 15;
  background-color: rgb(255, 255, 255);
  border-radius: 1px;
  padding: 20px;
}

#content_space {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 2px;
  height: 100%;
  width: 100%;
  border: none;
  background-color: lightgray;
  padding: 15px;
  overflow: auto;
  margin: 0;
}

/* hide side_parent if screen < 750 */
@media screen and (max-width: 750px) {
  .sidebar {
    display: none;
  }
}

.sidebar_Media_Show {
  position: absolute;
  display: flex; flex-direction: column;
  height: 100%;
  width: 100%;
  right: 0;
  overflow: auto;
  z-index: 1;
  transition: var(--transition);
}

.closeMenueIcon {
  display: none;
  height: 3rem;
  cursor: pointer;
  align-items: center;
  text-align: left;
  padding: 0.2rem 0 0 0.6rem;
  margin-bottom: 1rem;
}

.closeMenueIcon:hover{
  opacity: 0.8;
}
@media screen and (max-width: 750px) {
  .closeMenueIcon {
    display: block;
  }

  .closeMenueIcon i {
    color: red;
    font-size: 3rem;
  }
}

JavaScript代码 #

const sidebar =  document.querySelector('#sidebar');
const MenueIcon = document.querySelector('#MenueIcon');
const closeMenueIcon = document.querySelector('#closeMenueIcon');

// hide and show menu when click 
MenueIcon.addEventListener('click',function (event) {
        event.preventDefault(); // stop a default href 
        const sidebar_status =  sidebar.classList.contains("sidebar_Media_Show"); // check if sidebar have this class or no
        if(sidebar_status){
            sidebar.classList.remove("sidebar_Media_Show"); 
        }else{
            sidebar.classList.add("sidebar_Media_Show"); 
        }  
})

// auto close menu when resizing screen > 750px
window.addEventListener('resize', function(){
    if (window.innerWidth > 750) {
        sidebar.classList.remove("sidebar_Media_Show"); 
      }
});
// hide menu when click X button
closeMenueIcon.addEventListener('click', function(){
    sidebar.classList.remove("sidebar_Media_Show"); 
})

恳请告知如何实现菜单开合时的过渡动画效果。

要实现左右滑动的开合动画，核心是替换display: none的隐藏方式（无法触发过渡），改用transform属性配合CSS过渡实现。以下是具体修改步骤：

1. 定义过渡变量并调整基础样式 #

先在CSS根节点统一设置过渡参数，方便后续调整：

:root {
  --slide-transition: transform 0.3s ease-in-out;
}

然后修改移动端下的.sidebar样式，用transform将菜单移出视口，同时保留过渡属性：

@media screen and (max-width: 750px) {
  .sidebar {
    position: absolute;
    width: 80%; /* 可自定义菜单宽度 */
    height: 100%;
    transform: translateX(-100%);
    transition: var(--slide-transition);
    z-index: 1;
  }
}

2. 调整激活类的样式 #

修改.sidebar_Media_Show类，只需将菜单移回视口即可：

.sidebar_Media_Show {
  transform: translateX(0);
}

3. 保留原有JS逻辑 #

原JavaScript代码无需修改，切换sidebar_Media_Show类的逻辑完全适配新的CSS动画。

关键修改后的CSS片段 #

:root {
  --slide-transition: transform 0.3s ease-in-out;
}

/* ... 其他原有样式 ... */

@media screen and (max-width: 750px) {
  .sidebar {
    position: absolute;
    width: 80%;
    height: 100%;
    transform: translateX(-100%);
    transition: var(--slide-transition);
    z-index: 1;
  }
}

.sidebar_Media_Show {
  transform: translateX(0);
}

/* ... 其他原有样式 ... */

效果说明 #

• 菜单默认通过transform: translateX(-100%)隐藏在视口左侧，点击菜单按钮时，添加sidebar_Media_Show类将菜单滑入视口；关闭时移除类，菜单滑出。
• 可通过修改--slide-transition里的时长（如0.5s）或缓动函数（如ease）调整动画节奏。

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