具有平滑效果的Sidenav动画

基础概念

Sidenav（侧边导航栏） 是一种常见的网页布局元素，通常位于页面的一侧，用于提供导航链接或其他功能选项。平滑效果（Smooth Effect）则是指在用户交互过程中，Sidenav 的展开和收起动作以流畅、渐进的方式呈现，而不是突兀的瞬间变化。

类型

基于 CSS 的动画：使用 CSS3 的 transition 或 animation 属性实现。
基于 JavaScript 的动画：借助库如 jQuery 或原生 JavaScript 控制元素的样式变化。

应用场景

响应式网站：在不同屏幕尺寸下提供一致的导航体验。
单页应用（SPA）：在应用内部快速切换不同视图时保持导航栏的可见性。
移动优先设计：在移动设备上优化空间利用和操作便捷性。

示例代码

以下是一个使用 CSS 和 JavaScript 实现平滑 Sidenav 动画的简单示例：

HTML 结构

<div id="sidenav" class="sidenav">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
<button onclick="toggleSidenav()">Toggle Sidenav</button>

CSS 样式

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

JavaScript 控制

function toggleSidenav() {
  var sidenav = document.getElementById("sidenav");
  if (sidenav.style.width === "250px") {
    sidenav.style.width = "0";
  } else {
    sidenav.style.width = "250px";
  }
}