CSS侧边栏部分开闭效果

Question

我正在尝试对 css 执行相同的操作以打开和关闭侧边栏，如下面的 gif 图像所示，但我不明白。

我试过 hover 但它不起作用。

(我的例子可以在下面找到codepen)

(edit) --> 移至这里的片段：

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background-color: #f4f6f9;
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }

:root {
  --sidebar-color: #435f7d;
  --sidebar-color-header: #384d60;
  --item-hover: #212121;
  --item-click: #9CCC65;
}


.toolbar {
  height: 64px;
  width: 100vw;
  background-color: #607d8b;
  position: absolute;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.sidebar {
  position: absolute;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: width 0.15s linear;
}

.sidebar:hover {
  width: 240px; 
}

.sidebar-0 {
  height: 64px;
  background-color: var(--sidebar-color-header);
}

.sidebar-1 {
  padding: 0px 10px 10px 10px;
  background-color:  var(--sidebar-color);
}

.item {
  background-color: var(--sidebar-color); 
  margin: 15px 0px 15px 0px;
  display: flex;
  justify-content: space-between;
  border: none;
  border-radius: 6px;
  padding: 10px 16px 10px 10px;
  font-size: 16px;
  cursor: pointer; 
  outline: none;
  background-position: center;
  transition: background 0.7s;
}

.item:hover {
  background: var(--item-hover) radial-gradient(circle, transparent 1%, #363838 1%) center/15000%;
}

.item:active {
  background-color: var(--item-hover);
  background-size: 100%;
  transition: background 0s;
}

.item1hover {
  color: white;
  background-color: var(--item-hover) radial-gradient(circle, transparent 1%, #363638 1%) center/15000%;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DashboardSwgoh</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class='toolbar'></div>
    <div class='sidebar'>
      <div class='sidebar-0'></div>
      <div class='sidebar-1'>
        <div class="item">
          <div class='item1hover'>Dashboard</div>
        </div>
      </div>
    </div>
</body>
</html>

Answer 1

不设置动画（转换）背后有很大的 rendering performance 原因 left 属性。

所以我建议改用 transform: translateX()：

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background-color: #f4f6f9;
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }

:root {
  --sidebar-color: #435f7d;
  --sidebar-color-header: #384d60;
  --item-hover: #212121;
  --item-click: #9CCC65;
}


.toolbar {
  height: 64px;
  width: 100vw;
  background-color: #607d8b;
  position: absolute;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.sidebar {
  position: absolute;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s linear;
  transform: translateX(-200px)
}

.sidebar:hover {
  transform: translateX(0)
}

.sidebar-0 {
  height: 64px;
  background-color: var(--sidebar-color-header);
}

.sidebar-1 {
  padding: 0px 10px 10px 10px;
  background-color:  var(--sidebar-color);
}

.item {
  background-color: var(--sidebar-color); 
  margin: 15px 0px 15px 0px;
  display: flex;
  justify-content: space-between;
  border: none;
  border-radius: 6px;
  padding: 10px 16px 10px 10px;
  font-size: 16px;
  cursor: pointer; 
  outline: none;
  background-position: center;
  transition: background 0.7s;
}

.item:hover {
  background: var(--item-hover) radial-gradient(circle, transparent 1%, #363838 1%) center/15000%;
}

.item:active {
  background-color: var(--item-hover);
  background-size: 100%;
  transition: background 0s;
}

.item1hover {
  color: white;
  background-color: var(--item-hover) radial-gradient(circle, transparent 1%, #363638 1%) center/15000%;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DashboardSwgoh</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class='toolbar'></div>
    <div class='sidebar'>
      <div class='sidebar-0'></div>
      <div class='sidebar-1'>
        <div class="item">
          <div class='item1hover'>Dashboard</div>
        </div>
      </div>
    </div>
</body>
</html>

Answer 2

您的边栏元素有 position: absolute，因此您可以在常规规则和 hover 中使用 left 参数，而不是在悬停时更改 width规则和过渡设置移动（也部分离开屏幕）整个元素（不改变它的宽度）：

.sidebar {
  position: absolute;
  left: -200px;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: left 0.15s linear;
}

.sidebar:hover {
  left: 0px; 
}

完整示例如下：

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background-color: #f4f6f9;
    font-family: Roboto, "Helvetica Neue", sans-serif;
  }

:root {
  --sidebar-color: #435f7d;
  --sidebar-color-header: #384d60;
  --item-hover: #212121;
  --item-click: #9CCC65;
}


.toolbar {
  height: 64px;
  width: 100vw;
  background-color: #607d8b;
  position: absolute;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.sidebar {
  position: absolute;
  left: -200px;
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-color);
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
  transition: left 0.15s linear;
}

.sidebar:hover {
  left: 0px; 
}

.sidebar-0 {
  height: 64px;
  background-color: var(--sidebar-color-header);
}

.sidebar-1 {
  padding: 0px 10px 10px 10px;
  background-color:  var(--sidebar-color);
}

.item {
  background-color: var(--sidebar-color); 
  margin: 15px 0px 15px 0px;
  display: flex;
  justify-content: space-between;
  border: none;
  border-radius: 6px;
  padding: 10px 16px 10px 10px;
  font-size: 16px;
  cursor: pointer; 
  outline: none;
  background-position: center;
  transition: background 0.7s;
}

.item:hover {
  background: var(--item-hover) radial-gradient(circle, transparent 1%, #363838 1%) center/15000%;
}

.item:active {
  background-color: var(--item-hover);
  background-size: 100%;
  transition: background 0s;
}

.item1hover {
  color: white;
  background-color: var(--item-hover) radial-gradient(circle, transparent 1%, #363638 1%) center/15000%;
}

  <div class='toolbar'></div>
    <div class='sidebar'>
      <div class='sidebar-0'></div>
      <div class='sidebar-1'>
        <div class="item">
          <div class='item1hover'>Dashboard</div>
        </div>
      </div>
    </div>

CSS侧边栏部分开闭效果

CSS effect of opening and closing part of the sidebar

css

sidebar