May 8, 2026Budding
复刻液态玻璃：从 backdrop-filter 到光线折射
用 CSS backdrop-filter 加 SVG feDisplacementMap 做出近似 iOS 26 的玻璃质感。
cssdesign
Apr 22, 2026Evergreen
我的阅读栈：从 Zettelkasten 到数字花园
三年的笔记折腾让我学到的，关于知识系统怎么搭建的几条经验。
notesthinking
Feb 1, 2026Seedling
为什么我放弃了 scroll-snap
原生 scroll-snap 写起来很爽，但一旦动效要超过 CSS 能表达的范围，就要换 JS。
cssux
Jan 12, 2026Budding
TypeScript 模板字面量的实用场景
Template literal types 不只是写出 'Hello, ${name}' 那么简单。一些被低估的用法。
typescriptdx
Dec 28, 2025Seedling
暗色主题的 token 拆分
做暗色模式时,直接把每个 hex 翻一遍不够。颜色 token 至少要拆成 raw 和 semantic 两层。
cssdesign
Jan 20, 2025Seedling
快捷键设计的几个原则
Vim、Notion、Linear,好的快捷键有共同的纹理。
uxui
Mar 15, 2026·Budding·
#react#animation
Framer Motion 的 layoutId：共享元素过渡的工作原理
layoutId 是 Framer Motion 用于跨组件、跨路由共享布局的关键机制。
当一个组件挂载、而另一个同 layoutId 的组件正在卸载时，Framer 会自动计算二者的 FLIP 差，
并用 spring 把新组件从旧位置过渡到目标位置。
关键约束
- 两个 motion 元素必须同时存在于 React 树中至少一帧，否则 FLIP 计算失败。
实践中要么用
AnimatePresence，要么用 portal 把退出元素挂在外层。 - 不要嵌套两个相同
layoutId，否则 transform 会被叠加。 - 文字大小变化时，建议同时用
layoutprop 让子元素也参与过渡，避免 reflow 跳变。
与 View Transitions API 的对比
| 维度 | layoutId | View Transitions API |
|---|---|---|
| 跨浏览器 | 稳定 | Safari 26+ 才支持 |
| 嵌套元素 | 需手动声明 | 自动 |
| 调试 | React DevTools | 浏览器原生 |
| 中断恢复 | 支持 | 部分支持 |
对生产项目，目前仍建议 layoutId 兜底，View Transitions API 渐进增强。
←→or scroll·Enterto open