Sheet: allow controlling the enter/exit speed (opens ~2x slower than a CSS sheet)

未关闭
  • 哪里不对？
#10,898 1 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
18/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
活跃
技术栈
react, typescript
领域
frontend

调研方向

The payload points at the onEnter handler, which smooth-scrolls the scroller by enteredScroll / 100 * vp, so start by reading how Sheet computes that scroll distance and where its scroll behaviour is set. Three possible approaches are listed (sheet-sized travel, a JS scroll animation, or a duration prop), and the thread does not choose one, so a maintainer decision on the API is needed first. Done would mean a chosen approach that makes the sheet start moving on the first frame and is covered by a browser test, with the related issues #10854 and #10877 checked for overlap.

由索引模型根据 Issue 内容生成。

描述

Provide a general summary of the feature here

A way to control how fast a Sheet slides in and out. Right now it uses scrollTo({ behavior: 'smooth' }) over a full viewport of scroll, so the browser picks the speed and a regular-size sheet takes about twice as long to open as a typical CSS sheet animation.

🤔 Expected Behavior?

Apps can make a sheet open about as fast as their other overlays, for example around 250 to 300ms, and it starts moving right away.

😯 Current Behavior

onEnter smooth-scrolls the scroller a whole viewport (enteredScroll / 100 * vp), not the sheet's size. The first part of that scroll moves through empty space, so a sheet smaller than the viewport doesn't show up until partway through, and the total time is up to the browser.

Measured in Chromium (Vitest browser mode, rAF sampling of the sheet's position after pressing the trigger):

Sheet Viewport First visible Fully open
right, 400px wide 1024×768 ~190ms ~540ms
bottom, 500px tall 390×844 ~150ms ~490ms
bottom, 500px tall 1024×1300 ~200ms ~590ms

The CSS drawer we replaced with Sheet used a 250ms transition and moved from the first frame. Moving to Sheet made it feel noticeably slower to our team.

💁 Possible Solution

Some options, from least to most API:

  1. Start the enter scroll from the sheet's own edge instead of a full viewport out, so it moves from the first frame. This seems related to #10854, where the travel also depends on the viewport and not the sheet's size.
  2. Drive the enter and exit with a JS animation of scrollTop/scrollLeft (rAF with an easing curve) instead of native smooth scroll, with a default duration.
  3. Expose a prop like animationDuration (or read a CSS custom property) so apps can match their motion tokens.

We'd rather not replace the scroll ourselves: changing the scroll position while Sheet's own smooth scroll runs is exactly what gets a sheet stuck in #10877.

🔦 Context

We build a Drawer component on Sheet in GoDaddy's design system (Antares) and want swipe-to-dismiss and stacking, but the slower open is the main thing people notice compared to our previous drawer.

💻 Examples

Native iOS sheets take about 500ms, so Sheet isn't far off on phones, but on desktop a side drawer is expected to be quicker, and the ~150–200ms with nothing on screen reads as lag.

🧢 Your Company/Team

GoDaddy

🕷 Tracking Issue

No response

主要语言
TypeScript
星标
16k
派生
1.6k
平均合并
3 天 19 小时
30 天内合并 PR
46

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

adobe/react-spectrum 的其他 Issue

查看 adobe/react-spectrum 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。