如何修复CSS高度过渡：元素隐藏时无平滑动画问题

算力阿峰

2026-8-23

问题分析与修复方案

核心问题

你的CSS存在三个关键问题导致过渡异常：

.hidden 类中 position:absolute 和 top:-100000px 是瞬间生效的属性，无过渡效果，直接导致元素隐藏时闪回
仅对 max-height 设置过渡，opacity 变化未配置过渡动画，因此非定价表元素无过渡效果
隐藏时 max-height 过渡时长设为0s，且未设置 overflow:hidden，元素无法平滑收起

修复后的CSS代码

/* 给.packagebuilder下的所有子元素统一设置过渡基础 */
.packagebuilder > * {
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    position: relative; /* 统一默认定位，避免切换类时的布局跳变 */
}

.hidden {
    opacity: 0;
    max-height: 0;
    /* 移除position:absolute和top属性，避免元素瞬间脱离文档流 */
}

.shown {
    opacity: 1;
    max-height: 1000px;
}

关键修改说明

添加 overflow:hidden：确保 max-height 为0时元素内容不会溢出，这是高度平滑过渡的必要前提
同时过渡 max-height 和 opacity：让所有元素的透明度、高度变化都有动画，解决部分元素无过渡的问题
移除 .hidden 中的绝对定位配置：这两个属性无法过渡，会导致元素瞬间消失，改用 max-height:0 + opacity:0 配合过渡实现平滑收起
统一默认定位：避免类切换时 position 属性变化引发的布局跳变
若需要隐藏时的动画顺序更合理，可给 .hidden 单独设置过渡延迟：

.hidden {
    opacity: 0;
    max-height: 0;
    transition-delay: 0s, 0.3s; /* 先完成透明度过渡，再收起高度 */
}
.shown {
    opacity: 1;
    max-height: 1000px;
    transition-delay: 0s, 0s;
}