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

x6h2sr28 于 2023-04-01 发布在其他

关注(0)|答案(2)|浏览(221)

我有一个使用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中，但是没有用。

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()">SIDEBAR</button>
  </div>
</body>

css

来源：https://stackoverflow.com/questions/75883259/how-do-i-animate-a-css-sidebar-opening-and-closing-in-css

2条答案

按热度按时间

iqjalb3h1#

用弹性框 Package 侧边栏和主要内容。
更改侧边栏和main的flex以显示/隐藏侧边栏。
顺便说一句，html没有sidebar标签，你可以使用<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）回复(0）举报 2023-04-01

fae0ux8s2#

根据你想让侧边栏 * 滑动 * 还是 * 增长 *，我看到了两个选项。
无论哪种方式，您都只需要切换一个类来更改属性，然后转换将针对该属性启动。
我还将<sidebar>标记替换为常规div，因为这在技术上不是有效的HTML。更多信息请参阅此处：Why does CSS work with fake elements?
向左/向右滑动。
将margin-left设置为负宽度。
请记住，可能会有一些意想不到的后果，因为它将溢出flexbox。

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 {
  margin-left: -200px;
}

.main {
  flex: 1 1 auto;
  flex-wrap: wrap;
  flex-direction: column;
  overflow: auto;
}

<body>
  <div class="sidebar">
    <li><a href="#">Demo</a></li>
  </div>
  <div class="main">
    <button onclick="toggleSidebar()">SIDEBAR</button>
  </div>
</body>

增长/收缩
将flex-basis设置为0。
您最初使用简写flex属性将flex-basis设置为200px。这决定了侧边栏的宽度。
我还添加了white-space: nowrap来避免动画时的文字换行。如果这不能接受，你可能需要一个更复杂的解决方案来阻止子弹换行。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

赞(0）回复(0）举报 2023-04-01

我来回答

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

2条答案

相关问题

热门标签

最新问答