妙用:focus解决0到auto高度过渡的界限场景

linsk 1998 2026-09-07 79 1 收录于大前端专区

之前介绍过渡中枢代码表面可用，但存在内部内容被截断的界限情形。收起后若仍占体积会导致不必需的滚动条出现，如树形组件水平滚动条未消失的难题。本文提出借助:focus伪类技巧实现仅在用户操作时才播放过渡成效的特殊DOM结构。默认设置过渡时长为零秒让页面加载时不播放初始动画，点击按钮取得焦点后激活平滑过渡。配合展现属性允许离散变化及起始样式规则，可无缝衔接折叠状态并彻底消除残留占位难题。
总结由社区平台通过AI大范式技术产出

各位网友大家好，之前我己为大家讲述了0到auto的过渡，其中枢是 height:calc-size(auto,size)

.collapsible
{

overflow-y
: hidden;
}

.hide
 {

display
: none;
}

@media
 (
prefers-reduced-motion
: no-preference) {

@supports
 (
height
: calc-size(auto, size)) {



.collapsible
 {

height
: 
calc-size
(auto, size);

transition
: height .
3s
;
 }



.collapsible
.hide
 {

display
: block;

height
: 
0
;
 }
 }
}

Css

在线演示
上面代码表面上能用，不过是有两个界限场景

首先容器含有overflow：hidden，会导致内部内容被截断，如果内部内容还有box-shadow，很轻松被截掉。最好是只在过渡时含有overflow：hidden。
还有收起后应该含有disaplay:none，否则收起后仍然占据体积，在一些情况下会出现不必要的滚动条。比如下图的这个树形组件，折叠后由于仍然占据体积，水平滚动条并没有消失。

上述问题能够用animation或@starting-style化解。不过是又产生了新的难题————初始动画。

有没有一种技巧，只在使用者运维时才播放过渡效果？
没有通用解法，但是特定dom结构可以实现。
比如上面的树形组件，我们能够用展开按钮的:focus伪类来落地

@media
 (
prefers-reduced-motion
: no-preference) {

@supports
 (
height
: calc-size(auto, size)) {

.tree

li
 {

min-width
: fit-content;
 }

.tree

.tree-collapsible
{

height
: 
calc-size
(auto, size);

overflow
: hidden;

transition
: height 
0s
, display 
0s
 allow-discrete;
 }

.collapsed
>
.tree-collapsible
{

height
: 
0
;

display
: none;
 }

@starting-style
 {

.tree

.tree-collapsible
{

height
: 
0
;
 }
 }

.tree-toggler
:focus
 ~ 
.tree-collapsible
{

transition-duration
: .
3s
;
 }
 }
}

Css