【CSS】简单的抽屉面板展开收起自然过渡效果的css

/* 设置抽屉面板的基本样式 */
.drawer {
  width: 200px; /* 抽屉宽度 */
  height: 100vh; /* 抽屉高度 */
  position: fixed; /* 抽屉固定定位 */
  top: 0; /* 抽屉顶部与视窗顶部对齐 */
  left: -200px; /* 初始时抽屉在视窗左侧，不可见 */
  background-color: white; /* 抽屉背景色 */
  transition: left 0.3s ease-out; /* 平滑移动left属性变化，时长0.3秒 */
  overflow-y: auto; /* 抽屉内容超出时显示滚动条 */
  z-index: 10; /* 确保抽屉在内容之上 */
}
 
/* 当抽屉处于展开状态时的样式 */
.drawer.open {
  left: 0; /* 抽屉在视窗右侧，可见 */
}
 
/* 触发抽屉展开的按钮样式 */
.drawer-toggle {
  position: fixed;
  top: 16px; /* 距离视窗顶部 */
  right: 16px; /* 距离视窗右侧 */
  z-index: 11; /* 确保按钮在抽屉之上 */
  cursor: pointer; /* 鼠标悬停时显示指针样式 */
}
 
/* 抽屉展开按钮的图标样式 */
.drawer-toggle .icon {
  width: 48px;
  height: 48px;
  fill: black; /* 可以替换为SVG图标颜色 */
}

这段代码定义了一个抽屉面板的基本样式，并通过.open类来控制抽屉的展开和收起。当.drawer元素被添加.open类时，抽屉会从左侧滑入视窗。此外，抽屉的高度被设定为视窗高度(100vh)，确保它至少与视窗一样高，并且内容过长时会出现滚动条。平滑过渡效果由transition属性实现，时长为0.3秒。