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小提琴：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>

使用CSS或JS关闭过渡菜单

1 个答案: