admin管理员组

文章数量:1320656

I have a sidebar that is made using css display: flex; and a button that sets the sidebars display to display: none;. Currently the sidebar closes and opens instantaneously, with no animation. What i would like to happen is the sidebar pops out from the left with transition: 2.2s cubic-bezier(.36,-0.01,0,.77);. The sidebar hides and shows, I just want it to animate.

I tried just putting transition: 2.2s cubic-bezier(.36,-0.01,0,.77); in the sidebar CSS but that did not work. Here is the code for the sidebar the content and the 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(".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>

I have a sidebar that is made using css display: flex; and a button that sets the sidebars display to display: none;. Currently the sidebar closes and opens instantaneously, with no animation. What i would like to happen is the sidebar pops out from the left with transition: 2.2s cubic-bezier(.36,-0.01,0,.77);. The sidebar hides and shows, I just want it to animate.

I tried just putting transition: 2.2s cubic-bezier(.36,-0.01,0,.77); in the sidebar CSS but that did not work. Here is the code for the sidebar the content and the 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./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>

  • javascript
  • html
  • css
  • flexbox
  • sidebar
Share Improve this question edited Mar 30, 2023 at 4:06 Chris Hamilton 11k1 gold badge18 silver badges40 bronze badges asked Mar 30, 2023 at 0:43 Gabriel ToyGabriel Toy 321 gold badge1 silver badge6 bronze badges 2
  • 1 The js seems not relate to sidebar. – Shuo Commented Mar 30, 2023 at 0:50
  • My bad, wrong function. Thanks @Shou. – Gabriel Toy Commented Mar 30, 2023 at 0:55
Add a ment  | 

2 Answers 2

Reset to default 4

Depending on if you want the sidebar to slide or grow, I see two options.

Either way you just need to toggle a class in order to change a property, the transition will then kick in for that property.

I've also exchanged the <sidebar> tag for a regular div, since that isn't technically valid HTML. See here for more info: Why does CSS work with fake elements?

Slide left / right.

Set margin-left to the negative width.

Keep in mind there may be some unintended consequences since it will be overflowing the flexbox.

function toggleSidebar() {
  document.querySelector('.sidebar')
    .classList.toggle('closed');
}
body {
  display: flex;
  flex-direction: row;
  background-image: url("https://4kwallpapers./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>

Grow / Shrink

Set flex-basis to 0.

You initially set flex-basis to 200px with the shorthand flex property. That's what determines the width of the sidebar.

I also added white-space: nowrap to avoid text wrapping while animating. If that's not acceptable you may need a more plex solution to stop the bullets from wrapping.

function toggleSidebar() {
  document.querySelector('.sidebar')
    .classList.toggle('closed');
}
body {
  display: flex;
  flex-direction: row;
  background-image: url("https://4kwallpapers./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%;
  white-space: nowrap;
}

.sidebar.closed {
  flex-basis: 0;
}

.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>

Wrap sidebar and main content by flex box.

Change flex of sidebar and main to show/hide sidebar.

Btw html don't have sidebar tag, you can use <aside> instead.

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>

本文标签： javascriptHow do I animate a CSS sidebar opening and closing in CSSStack Overflow

版权声明：本文标题：javascript - How do I animate a CSS sidebar opening and closing in CSS? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742066106a2418843.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。