如何在 CSS 中为 CSS 侧边栏打开和关闭设置动画？

问题描述 投票：0回答：2

我有一个使用 css 

display: flex;
制作的侧边栏和一个将侧边栏显示设置为 
display: none;
的按钮。目前侧边栏关闭并立即打开，没有动画。我想要发生的是侧边栏从左侧弹出
transition: 2.2s cubic-bezier(.36,-0.01,0,.77);
。侧边栏隐藏和显示，我只是想让它动起来。

我尝试将 

transition: 2.2s cubic-bezier(.36,-0.01,0,.77);
放在侧边栏 CSS 中，但这没有用。这是侧边栏内容和 js 的代码。

function toggleSidebar() {
  var sidebar = document.querySelector('sidebar');
  var display = sidebar.style.display;
  if (display == 'none') {
    sidebar.style.display = 'flex';
  } else {
    sidebar.style.display = 'none';
  }
}
body {
  display: flex;
  flex-direction: row;
  background-image: url("https://4kwallpapers.com/images/wallpapers/macos-13-macos-ventura-macos-2022-stock-light-5k-retina-2048x1536-8135.jpg");
  background-size: cover !important;
  margin: 0px;
  height: 100%;
}

sidebar {
  flex: 0 0 200px;
  flex-direction: column;
  backdrop-filter: blur(30px) saturate(2);
  -webkit-backdrop-filter: blur(30px) saturate(2);
  padding-inline: 0;
  padding-block: 13px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: 2.2s cubic-bezier(.36,-0.01,0,.77);
  height: 100%;
}

.main {
  flex: 1 1 auto;
  flex-wrap: wrap;
  flex-direction: column;
  overflow: auto;
}
<body>
  <sidebar>
    <li><a href="#">Demo</a></li>
  </sidebar>
  <div class="main">
    <button onclick="toggleSidebar()"/>
  </div>
</body>

javascript html css flexbox sidebar
2个回答
0
投票

通过弹性框包裹侧边栏和主要内容。

更改侧边栏和主要的

flex
以显示/隐藏侧边栏。

顺便说一句，html 没有侧边栏标签，您可以使用 

<aside>
代替。

const container = document.querySelector('.container')
const toggleSidebar = () => container.classList.toggle('active')
.container {
  display: flex;
}

aside {
  flex: 0;
  flex-direction: column;
  backdrop-filter: blur(30px) saturate(2);
  -webkit-backdrop-filter: blur(30px) saturate(2);
  padding-inline: 0;
  padding-block: 13px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100dvh;
  background: gray;
  transition: 2.2s cubic-bezier(.36, -0.01, 0, .77);
}

.main {
  flex: 1;
  flex-wrap: wrap;
  flex-direction: column;
  overflow: auto;
  transition: 2.2s cubic-bezier(.36, -0.01, 0, .77);
}

.container.active aside {
  flex: 0.4;
}

.container.active .main {
  flex: 0.6;
}
<div class="container">
  <aside>
    <li><a href="#">Demo</a></li>
  </aside>
  <div class="main">
    <button onclick="toggleSidebar()">sidebar</button>
  </div>
</div>

0
投票

您只需要切换一个将

flex-basis
设置为0的类。

function toggleSidebar() {
  document.querySelector('sidebar')
    .classList.toggle('closed');
}
body {
  display: flex;
  flex-direction: row;
  background-image: url("https://4kwallpapers.com/images/wallpapers/macos-13-macos-ventura-macos-2022-stock-light-5k-retina-2048x1536-8135.jpg");
  background-size: cover !important;
  margin: 0px;
  height: 100%;
}

sidebar {
  flex: 0 0 200px;
  flex-direction: column;
  backdrop-filter: blur(30px) saturate(2);
  -webkit-backdrop-filter: blur(30px) saturate(2);
  padding-inline: 0;
  padding-block: 13px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: 2.2s cubic-bezier(.36,-0.01,0,.77);
  height: 100%;
}

sidebar.closed {
  flex-basis: 0;
}

.main {
  flex: 1 1 auto;
  flex-wrap: wrap;
  flex-direction: column;
  overflow: auto;
}
<body>
  <sidebar>
    <li><a href="#">Demo</a></li>
  </sidebar>
  <div class="main">
    <button onclick="toggleSidebar()">SIDEBAR</button>
  </div>
</body>

您最初使用速记 

flex-basis
属性将 
200px
设置为 
flex
。这就是决定侧边栏宽度的因素，如果您希望它从左侧弹出和弹出，这就是您需要设置动画的属性。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.