动画 · 页面过渡 · 13

抽屉滑入

抽屉滑入 = 面板从边缘滑入，在不生硬切换的前提下把二级视图叠在页面之上。

尊重 prefers-reduced-motion：动画关闭，仅保留终态。

怎么向 AI 描述它

Slide a drawer from the right edge: translateX(100% to 0) over 300ms with a soft easing, plus a fading scrim, transform and opacity only.

Open the drawer from the left instead, and shorten the easing to 240ms for a snappier feel.

Drive the drawer with a state class (open/closed) and CSS transitions, add focus trap + Esc-to-close, expose --drawer-width and --drawer-speed, and under prefers-reduced-motion replace the slide with a fade. Keep the panel off the main scroll.

修改类 Prompt 只动目标，不碰页面其余部分。

抽屉滑入是什么？

抽屉把面板从一侧滑入，让筛选、菜单或详情出现，而不必跳到新屏。只用 transform: translateX 加柔和缓动，并配一层淡入遮罩，让用户知道背景只是暂停。控制在 300ms 内，否则显迟钝。

动画标本

触发: click
技术: css
时长: 2.4s
缓动: cubic-bezier(0.4, 0, 0.2, 1)
性能: transform

什么时候用

Mobile nav, filters, detail panels, cart
Any secondary view that should layer, not navigate

什么时候别用

Primary navigation on desktop — a full page is clearer
Without a scrim — the background feels frozen, not paused

Always pair the slide with a fading scrim so users know the background is paused, not gone.

获取代码

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.drawer-demo { width: min(240px, 100%); height: 150px; border-radius: 12px; overflow: hidden; position: relative; background: var(--surface-2, #eef0f5); border: 1px solid var(--border, #e6e7ec); }
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 62%;
  padding: 16px;
  background: var(--surface, #fff);
  border-left: 1px solid var(--border, #e6e7ec);
  box-shadow: -16px 0 30px -18px rgba(0, 0, 0, 0.3);
  animation-name: drawer;
  animation-duration: var(--anim-duration, 2.4s);
  animation-timing-function: var(--anim-easing, cubic-bezier(0.4, 0, 0.2, 1));
  font: 600 13px/1.5 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--ink, #1a1c22);
}
@keyframes drawer {
  0%, 15% { transform: translateX(110%); }
  35%, 75% { transform: translateX(0); }
  95%, 100% { transform: translateX(110%); }
}

<div class="drawer-demo"><div class="drawer anim-el">Menu</div></div>

复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。

另见

风格

极简→

主题

AI SaaS 落地页→

组件

导航栏→

抽屉滑入

抽屉滑入是什么？

动画标本

什么时候用

什么时候别用

另见

组件

动画

风格

主题

Prompt

术语

反模式

抽屉滑入

抽屉滑入是什么？

动画 标本

什么时候用

什么时候别用

另见

动画标本