div移除子元素时::before伪元素CSS过渡不生效问题修复

• 对预制Svelte树视图组件做定制开发时，参考VSCode样式添加了层级引导线、配置了等宽字体，最终效果为展示美国各州及下辖游乐园信息的树结构。
• 层级引导线通过::before伪元素实现，已校准位置使其恰好对齐折叠/展开尖括号的尖端。
• 预期交互：展开、折叠树节点时，引导线通过1秒平滑过渡调整长度，适配子节点的新增或移除；实际测试表现：仅展开节点时过渡可正常触发，折叠节点（例如折叠「California」节点）时，上级USA层级的引导线不会触发CSS过渡，即使已明确配置transition规则也无效。
• 当前引导线相关CSS代码如下：

div.rule:before {
    content:"";
    background: black;
    position: absolute;
    bottom: 0px;
    top: 3px;
    height: 0;
    width: 1px;
    /* align the line exactly under the tip of the angle bracket! */
    transform: translate(1px, 2px);
    transition: all 1s;
}
    
div.rule.expanded:before {
    content:"";
    background: black;
    position: absolute;
    bottom: 5px;
    top: 19px;
    height: auto;
    max-height: calc(100% - 23px);
    width: 1px;
    /* align the line exactly under the tip of the angle bracket! */
    transform: translate(1px, 2px);
    transition: all 1s;
}

CSS过渡无法在auto这类动态计算值和固定值之间生成补间动画。当前代码折叠态伪元素高度为固定值0，展开态使用height: auto搭配max-height控制高度：

• 展开节点时，子节点逐步插入渲染，父容器高度连续增长，max-height存在明确的数值变化区间，因此动画可以正常触发
• 折叠节点时，Svelte默认会直接移除子节点DOM，父容器高度瞬间坍缩，height: auto的计算值直接跳变到0，浏览器无法计算过渡所需的中间状态值，因此会直接跳转到最终样式，看不到过渡效果。

1. 统一使用可过渡的明确数值属性控制引导线长度，避免混用height: auto：
   • 给div.rule节点添加position: relative和overflow: hidden，作为伪元素的定位上下文，同时避免动画过程中引导线溢出
   • 移除两个状态下重复的冗余样式，折叠态将height: 0改为max-height: 0，展开态移除height: auto配置，仅保留max-height控制高度
   • 移除transition: all配置，仅对需要动画的max-height属性设置过渡，减少不必要的性能开销
2. 调整后可正常双向触发过渡的CSS代码如下：

div.rule {
    position: relative;
    overflow: hidden;
}

div.rule:before {
    content: "";
    background: black;
    position: absolute;
    top: 19px;
    left: 0;
    width: 1px;
    max-height: 0;
    /* 对齐折叠箭头尖端位置 */
    transform: translate(1px, 0);
    transition: max-height 1s ease;
}

div.rule.expanded:before {
    max-height: calc(100% - 23px);
}

3. 若Svelte折叠时直接销毁子节点DOM，需要给树节点添加退出过渡逻辑，将子节点移除时机延迟1秒（和引导线过渡时长对齐），避免父容器在过渡开始前就高度坍缩，可直接使用Svelte内置的transition指令实现该逻辑。

内容的提问来源于stack exchange，提问作者Waleed Dahshan