CSS Grid布局切换无平滑过渡？transition无效求解决方案

你当前的代码无法实现过渡效果，核心原因有两个：

• CSS过渡不支持grid-template-areas、grid-template-columns这类网格布局属性的变化
• display: none和默认显示状态的切换无法触发过渡，因为这是瞬间性的状态变更

以下是可行的解决方案：通过过渡菜单的宽度与透明度，配合CSS变量调整网格列宽，实现平滑的布局切换效果，替代直接修改网格区域或隐藏元素的方式。

修改后的完整代码 #

HTML #

<div id="cont" class="cont">
  <div class="Header">Header</div>
  <div class="Menu">Menu</div>
  <div class="Main"><button onclick="collapse()">toggle Sidebar</button></div>
  <div class="Footer">Footer</div>
</div>

CSS #

body {
  margin: 0;
}
.cont {
  display: grid;
  /* 用CSS变量控制菜单列宽度，默认100px */
  grid-template-columns: var(--menu-width, 100px) 1fr 1fr;
  grid-template-rows: 100px 1fr 50px;
  grid-template-areas:
    "Header Header Header"
    "Menu Main Main"
    "Menu Footer Footer";
  height: 100vh;
  background: blue;
  grid-gap: 10px;
  /* 过渡网格列宽度变化 */
  transition: grid-template-columns 0.5s ease;
}
/* 折叠状态下修改菜单列宽度为0 */
.cont.collapsed {
  --menu-width: 0;
}
.cont div {
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  font-size: 30px;
  overflow: hidden; /* 防止菜单内容溢出 */
}
.Header {
  grid-area: Header;
}
.Menu {
  grid-area: Menu;
  /* 过渡菜单的宽度和透明度 */
  transition: width 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
  width: var(--menu-width, 100px);
  opacity: 1;
}
/* 折叠时隐藏菜单内容 */
.cont.collapsed .Menu {
  opacity: 0;
  width: 0;
  padding: 0;
}
.Main {
  grid-area: Main;
}
.Footer {
  grid-area: Footer;
}

JavaScript #

function collapse() {
  document.querySelector(".cont").classList.toggle("collapsed");
}

关键改动说明 #

1. 用CSS变量控制网格列宽：通过--menu-width变量动态调整菜单列的宽度，利用grid-template-columns的过渡实现整体布局的平滑变化
2. 替换display:none的过渡方案：菜单元素通过width、opacity和padding的过渡实现隐藏效果，避免使用无法过渡的display属性
3. 简化JS逻辑：只需要切换collapsed类，所有样式变化由CSS统一处理，减少DOM操作

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