如何在 CSS 中自定义 transition 或 animation 的速度曲线?cubic-bezier 的关键点数量有什么限制?
本文讲解 cubic-bezier 四个参数如何决定缓动曲线形状,包括 x 范围限制、y 可超出范围引起回弹,以及如何根据效果选择参数,避免常见误区。
动画专题面试题第 2 页,显示第 51–79 题,共找到 79 道完整解析,可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
本文讲解 cubic-bezier 四个参数如何决定缓动曲线形状,包括 x 范围限制、y 可超出范围引起回弹,以及如何根据效果选择参数,避免常见误区。
围绕“transition 只在哪些属性值变化时触发?请说明 display 从 none 到 block 是否过渡”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答需要围绕限定可插值与不可插值属性,并解释 display 的切换行为常配合其他方式模拟。
围绕“如何利用 transition 结合 visibility 实现元素淡入淡出时可点击区域的延迟挂载”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 visibility 在过渡期间的可延迟特性,不覆盖其他不影响布局的属性。
围绕“给一个按钮添加悬停微交互,选择用 transition 还是 animation?你基于什么判断”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖从触发方式、控制能力等角度对比。
本题讲解 prefers-reduced-motion 媒体特性的机制、实际场景与边界。用条件示例展示如何停止自动轮播、替换关键帧动画,并指出它不拦截 JS 生成的动画,需配合 matchMedia。讨论失效条件与开发代价。
本文解释如何用 preventDefault 阻止滚轮引起的页面滚动,同时保留自定义行为;重点说明 passive 选项的影响、滚动动画管理、负滚动链及 wheel 事件可取消性的注意事项。
围绕“scroll 事件触发非常频繁,如何有效地控制处理频率?请对比 rAF、timeout 和 passive 的配合”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须比较 rAF 与防抖节流在滚动中的差异,以及 passive 保证不被阻塞。
围绕“React 中 requestAnimationFrame 循环驱动画布时,Effect 的 cleanup 取消的”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明每帧重新预约导致需保存最新 id 并在 cleanup 取消。
围绕“startTransition 标记的非紧急更新在调度上有什么不同的行为”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出被标记的更新可被打断、让位给紧急更新。
围绕“React 19 中 startTransition 接受 async 函数(Action)后与 React 18 ”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须对比 React 19 异步 Action 自动管理 pending/错误与 React 18 只接受同步作用域的差异。
围绕“为什么不能把受控输入框的 value 更新包在 startTransition 里”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出输入是受控同步渲染、延迟会导致打字卡顿/丢字符。
围绕“为什么 transition 不能减少渲染的总工作量,什么场景用它没有收益”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出 transition 只改变优先级和可中断性,并给出真正耗时在计算本身时的无效场景。
围绕“transition 与 Suspense 配合时如何避免已显示内容被 fallback 骨架屏替换”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出 transition 让已有内容停留直到新数据就绪这一行为。
围绕“用 transition 优化搜索输入与用防抖优化有什么本质区别”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出 transition 不延迟更新而是降低优先级、仍每次响应。
围绕“优化慢列表渲染时,useTransition 和 useDeferredValue 应该如何选择”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出能控制 setState 入口用 transition、只能拿到值用 deferredValue 的判断标准。
围绕“useTransition 返回的 isPending 适合设计什么样的加载反馈”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须答出用 pending 状态做内联弱反馈而非替换内容的 UX 决策。
围绕“为什么 React Native 中用 Animated 改变 width/height 无法走原生驱动,代价是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释布局属性需要走 Yoga 布局与 JS 线程每帧更新导致掉帧,并给出 transform 缩放或 LayoutAnimation。
围绕“React Native 列表项入场动画为什么容易和 FlatList 虚拟化冲突”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 item 复用导致动画状态残留、滚动中重复触发入场的问题,及按 key 记录已动画状态的解法。
围绕“React Native Animated 的 useNativeDriver 把什么工作移出了 JS 线程,支持哪”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明动画声明序列化后在原生侧执行、每帧不再过桥,并列出仅支持 transform/opacity 等非布局属性的限制。
围绕“React Native 中每帧 setState 驱动动画为什么是反模式”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 60fps 下每帧触发 React 渲染与桥接的开销,并引出 Animated 或原生驱动方案。
围绕“React Native 手势跟手动画要保证 60fps,关键约束是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明手势事件经 JS 线程处理时,JS 忙即掉帧,因此要让跟手逻辑留在 UI/原生侧。
围绕“React Native 的 InteractionManager.runAfterInteractions 解决什”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明把重工作推迟到转场/交互动画之后以保证动画流畅,以及任务队列堆积时延迟不可控的局限。
围绕“React Native 中 JS 线程被长任务阻塞时用户会看到什么现象,为什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明依赖 JS 的动画、触摸响应与渲染全部延迟的表现,以及把重计算移出 JS(原生模块、分片)的方向。
围绕“React Native LayoutAnimation 适合哪类动画,什么时候不够用”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明其适合布局变化的整体过渡、声明简单,但不支持精细手势跟随与逐元素编排,并注意 Android 需手动开启。
围绕“React Native 中监听 ScrollView 的 onScroll 为什么必须设置 scrollEvent”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 iOS 默认不连续派发滚动事件、回调频率与 JS 线程压力的关系,并引出把滚动逻辑移到原生/动画线程的方向。
围绕“React Native 页面转场卡顿的官方排查思路是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答要按官方性能文档说明转场期间 JS 线程过载是主因,以及 InteractionManager、减少转场期渲染的缓解手段。
围绕“Playwright 视觉对比因抗锯齿和动画产生抖动时有哪些官方手段降低误报”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确 maxDiffPixelRatio 阈值、animations:'disabled'、mask 遮盖动态区域三种手段。
给出 Vue 修改状态后等待 nextTick 再访问节点的写法,说明它等待更新刷新而不是网络、动画和浏览器绘制,并区分一次操作与持续 post 监听。
围绕“小程序逻辑层执行耗时任务会卡住什么,为什么渲染层动画仍可运行但事件响应变慢”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须基于双线程分工说明事件派发受阻而 WXML 已渲染页面不卡的成因。