Bootstrap三栏模板左侧Off-Canvas Menu滑动动画失效求助

嘿，我看了你的代码，马上就发现问题所在了——你现在用的display: none/block是没办法做过渡动画的，因为这个属性是瞬间切换元素显示状态，根本没有中间过渡的空间！而且移动端媒体查询里直接把侧边栏设为display: none，也阻断了动画触发的逻辑。

下面是具体的修复步骤，分CSS和JS两部分调整：

1. 重构CSS样式（核心修改） #

把原来依赖display的逻辑改成用transform来控制侧边栏的位置，这样就能支持平滑过渡了：

/* Layout Containers */
.header-container{position: relative;height:50px;}
body{
margin: 0;
}
.wrapper{
min-height: 100vh;
background: #ccc;
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex: 1;
background: #999;
color: #000;
transition: all 0.3s ease-in-out;
}
.columns{
display: flex;
flex:1;
}
.main{
flex: 1;
order: 2;
background: #eee;
padding: 20px;
transition: transform 0.3s ease-out; /* 给主内容加过渡动画 */
}
.sidebar-first{
width: 260px;
background: #ccc;
order: 1;
transition: transform 0.3s ease-out; /* 用transform做过渡 */
position: fixed; /* 固定位置，避免布局跳动 */
height: calc(100vh - 50px); /* 占满header下方的全屏高度 */
left: 0;
top: 50px;
transform: translateX(-100%); /* 默认隐藏在屏幕左侧外 */
z-index: 100; /* 确保侧边栏在内容上方 */
padding: 20px;
}
.sidebar-second{
width: 260px;
order: 3;
background: #ddd;
}
.sidebar-first .closebtn {
font-size: 36px;
cursor: pointer;
}
/* 移动端适配 */
@media (max-width: 991.99px) {
.sidebar-second {display:none;}
/* 侧边栏打开状态的类 */
.sidebar-first.open {
transform: translateX(0); /* 滑入屏幕 */
}
.main.shift {
transform: translateX(260px); /* 主内容向右偏移，避免被侧边栏覆盖 */
}
}
/* 桌面端默认显示侧边栏，回归正常flex布局 */
@media (min-width: 992px) {
.sidebar-first {
transform: translateX(0);
position: static;
height: auto;
}
}
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
cursor: pointer;
}

2. 修改JS逻辑 #

不再直接操作display和width，而是通过添加/移除CSS类来触发动画，这样逻辑更清晰，也能保证动画生效：

/* 打开侧边栏：给元素添加对应的类 */
function openNav() {
document.getElementById("sidebar-first").classList.add("open");
document.getElementById("main").classList.add("shift");
}
/* 关闭侧边栏：移除类，让元素回到初始状态 */
function closeNav() {
document.getElementById("sidebar-first").classList.remove("open");
document.getElementById("main").classList.remove("shift");
}

额外小优化（可选） #

如果想让交互体验更好，可以加个半透明遮罩：

1. 在header-container后面添加遮罩div：

<div class="overlay" onclick="closeNav()"></div>

2. 给遮罩添加CSS样式：

.overlay {
position: fixed;
top: 50px;
left: 0;
width: 100%;
height: calc(100vh - 50px);
background: rgba(0,0,0,0.5);
z-index: 99;
display: none;
}
.overlay.show {
display: block;
}

3. 修改JS，打开/关闭时同步控制遮罩：

function openNav() {
document.getElementById("sidebar-first").classList.add("open");
document.getElementById("main").classList.add("shift");
document.querySelector(".overlay").classList.add("show");
}
function closeNav() {
document.getElementById("sidebar-first").classList.remove("open");
document.getElementById("main").classList.remove("shift");
document.querySelector(".overlay").classList.remove("show");
}

这样修改后，侧边栏就能平滑地从左侧滑入滑出了——核心就是用transform替代display来控制元素的显示状态，因为transform是支持CSS过渡动画的属性。

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