CSS 里从固定高度过渡到 height: auto，只写 transition 往往会直接跳变。在支持的浏览器里，interpolate-size: al… · @BaiBtw · TwKit

@BaiBtw

CSS 里从固定高度过渡到 height: auto，只写 transition 往往会直接跳变。在支持的浏览器里，interpolate-size: allow-keywords 可以让长度或百分比与 auto、min-content、max-content 等固有尺寸之间平滑过渡。例如导航项从 80px 展开到容纳完整标签的宽度。 它会继承，放在 :root 可让整页启用，也能只放在某个容器上。至少一端要是长度或百分比，不能直接让两个固有尺寸关键字互相过渡。显式开启这个行为，是为了避免改变旧样式原本依赖的效果。 如果还要在内容尺寸上做计算，可以用 calc-size()。例如 calc-size(auto, size - 10px) 表示自动尺寸减 10px；想放大到 1.5 倍，要写 size * 1.5，size + 50% 的百分比可能按包含块计算。 普通尺寸过渡用 interpolate-size 更简单，不支持时退回直接切换。用了 calc-size()，则需要保留普通尺寸声明或用 CSS 特性查询提供回退。

曝光 20 · 评论 1 · 点赞 1 · 书签 0