CSS3 实现侧边栏展开收起动画

下面来介绍一下“CSS3 实现侧边栏展开收起动画”的完整攻略：

一、HTML 结构

在实现侧边栏展开收起的过程中，需要先构建 HTML 结构。通常情况下，我们可以在网页的左侧或右侧设置一个固定宽度的侧边栏，而在其余部分放置主要内容。以下是一个简单的 HTML 结构示例：

<div class="wrapper">
  <div class="sidebar"></div>
  <div class="main-content"></div>
</div>

其中，.wrapper 是整个页面的容器，.sidebar 是侧边栏的容器，.main-content 是主要内容的容器。

二、CSS 样式

为了让侧边栏展开收起具有动画效果，需要设置一些 CSS 属性。下面是实现这个效果所需的核心 CSS 样式：

.wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

.sidebar {
  width: 250px;
  height: 100vh;
  background-color: #f3f3f3;
  transition: all 0.3s ease;
}

.main-content {
  flex: 1;
  height: 100vh;
  background-color: #fff;
  transition: all 0.3s ease;
}

.wrapper.show-sidebar .sidebar {
  width: 0;
}

.wrapper.show-sidebar .main-content {
  flex: 0;
}

其中，.wrapper 使用 display: flex 属性将子元素排列在一行，并且设置 justify-content: flex-start 和 align-items: stretch 属性让初始状态下，侧边栏显示，并填充整个高度。

.sidebar 设置 width 属性来控制其宽度，并设置 transition: all 0.3s ease 属性为元素添加动画效果。.main-content 使用 flex: 1 属性填充剩余的宽度，同样设置 transition 属性添加动画效果。

最后，.wrapper.show-sidebar .sidebar 和 .wrapper.show-sidebar .main-content 分别设置了不同的样式，用于在侧边栏展开或收起时修改侧边栏和主要内容的样式。

三、JavaScript 控制

为了实现侧边栏的展开和收起，需要使用 JavaScript 动态控制样式。以下是具体的 JavaScript 控制实现：

let wrapper = document.querySelector('.wrapper');
let btnToggle = document.querySelector('.btn-toggle');

function toggleSidebar() {
  wrapper.classList.toggle('show-sidebar');
}

btnToggle.addEventListener('click', toggleSidebar);

代码中，我们首先获取 .wrapper 和 .btn-toggle 元素。接着定义 toggleSidebar 函数，通过 classList.toggle 方法在 .wrapper 中添加 show-sidebar 类名，从而控制侧边栏的展开和收起。最后使用 addEventListener 方法为 .btn-toggle 元素添加点击事件，使其能够触发 toggleSidebar 函数。

四、示例说明

以下是两个示例，用来进一步演示如何实现侧边栏展开和收起的动画效果：

示例一

在此示例中，我们将侧边栏放在页面左侧，点击“Toggle Sidebar”按钮时，侧边栏会从左侧展开或收起。

HTML 结构：

<div class="wrapper">
  <div class="sidebar"></div>
  <div class="main-content"></div>
</div>
<button class="btn-toggle">Toggle Sidebar</button>

CSS 样式：

.wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

.sidebar {
  width: 250px;
  height: 100vh;
  background-color: #f3f3f3;
  transition: all 0.3s ease;
}

.main-content {
  flex: 1;
  height: 100vh;
  background-color: #fff;
  transition: all 0.3s ease;
}

.wrapper.show-sidebar .sidebar {
  width: 0;
}

.wrapper.show-sidebar .main-content {
  flex: 0;
}

.btn-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
  padding: 10px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

JavaScript 控制：

let wrapper = document.querySelector('.wrapper');
let btnToggle = document.querySelector('.btn-toggle');

function toggleSidebar() {
  wrapper.classList.toggle('show-sidebar');
}

btnToggle.addEventListener('click', toggleSidebar);

示例二

在此示例中，我们将侧边栏放在页面右侧，并将其默认隐藏。鼠标悬停在页面右侧时，侧边栏会从右侧滑入。移开鼠标时，侧边栏会滑出，隐藏起来。