F7.11.1Next action not blocked by motion设计
用户的下一步操作不应被等待未完成的动效阻塞
别名: 输入被动画堵住 · animationend 才响应 · 命中区锁死
概念解释
转场播放期间如果把点击吃掉或推迟到动画结束,下一步操作就被绑在了动画时钟上。阻塞发生在输入管线:命中区 pointer-events: none、手势识别器要等 completed、路由要等过渡钩子返回。原则上运动该让路;这里说的是让路失败时输入具体被谁拦住。
机制
界面常把「视觉还在插值」和「交互模型还在旧状态」绑死。为了避免点到半透明层或飞到一半的按钮,整层在 isAnimating 期间不接收事件。结果是:用户的指针已经指向新目标,事件却进了队列或被丢弃。丢弃造成「点了没反应」的二次点击;入队造成动画结束后突然连跳两页。
跟手的滚动、拖拽如果也等过渡,阻塞会从一次点击变成一次持续手势被卡住。问题不是时长设长了,是输入采样对动画状态加了锁。解开锁不等于画面立刻跳到终态——那是中断后的中间态问题——但至少新意图能进来。
边界
- 正在做拖拽跟手的那一层不能同时响应「点穿」到下面,否则会误触;锁的是穿透,不是锁整个应用。
- 提交后防重复点击是业务锁,应在按钮自己的提交态上,不该靠页面转场去挡。
- 系统权限框等外部 UI 出现时,应用本来就失去输入,这不是动画阻塞。
怎么落地
- 动画进行中保持目标命中区可点;新事件立即改路由或关层,而不是
await过渡结束。 - 区分「防止点穿下层」和「禁止一切输入」。只挡被遮住的那一层。
- 验证:过渡放到 40% 时点主按钮或滑返回。事件若在动画结束才出现在日志里,输入被时钟堵住了。