使用 CSS 或 JS 关闭过渡菜单

Question

我有一个侧边栏div 和一个内容div，它们充当两个CSS grid 列。侧边栏本身由另外两列组成，但这里是设置的要点：

<div class='site-wrap'>
    <div class='sidebar'>
        <div class='navbar'></div>
        <div class='menu'>
            <ul>
                <li>menu item</li>
            </ul>
        </div>
    </div>
    <div class='content>
        <h1>Hello world</h1></div>
    </div>
</div>

大部分 CSS 并不重要，但侧边栏的工作原理如下：

.site-wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
}

.sidebar {
    display: grid;
    grid-template-columns: 64px 1fr;
    height: 100vh
}

这是一个带有工作实现的 JS Fiddle：https://jsfiddle.net/z4mLtwoy/

目前，我关闭菜单的解决方案是将grid-template-columns: 72px 1fr 添加到site-wrap。这行得通，但我想添加一个过渡。由于 CSS 网格还没有过渡，是否有 CSS（可能是 flexbox）或 JS 实现可以提供过渡？

Answer 1

如果您将width 或max-width 属性设置为menu 元素，则可以使用CSS transitions 为该属性设置动画。无需使用网格，您可以使用flexbox 布局将它们显示为列。

body {
  margin: 0;
  padding: 0;
}

.site-wrap {
  display: flex;
  height: 100vh;
}

.sidebar {
  display: flex;
}

.site-wrap .menu {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  box-sizing: border-box;
  height: 100vh; 
  margin: 0;
  overflow: hidden;
  padding: 0;
  transition: max-width 0.5s ease;
  max-width: 100px;
}

.site-wrap .navbar {
  background: green;
  height: 100vh;
  width: 64px;
}

.menu li {
  padding: 16px;
  white-space: nowrap;
}

.content {
  background: #EFEFEF;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  flex-grow: 1;
  padding: 16px;
}

.banner {
  background: lightblue;
  box-sizing: border-box;
  padding: 16px;
  height: 64px;
  width: 100%;
}

#trigger {
  display: none;
  position: fixed;  
}

.button {
  background: blue;
  color: white;
  cursor: pointer;
  margin: 8px;
  padding: 8px 16px;  
}

#trigger:checked ~ .site-wrap .menu {
  max-width: 0px;
}

<input id='trigger' type='checkbox'>
<div class='banner'>
  <label for='trigger' class='button'>Click me</label>
</div>
<div class='site-wrap'>
  <div class='sidebar'>
    <div class='navbar'></div>
    <ul class='menu'>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>
  <div class='content'>
    <h2>Hello world</h2>
  </div>
</div>