使用CSS Transition实现显隐时.hidden类无过渡效果的问题求助

核心原因 #

你的代码里导致.hidden类无过渡效果的关键问题有两个：

• height: auto不支持CSS过渡：CSS过渡要求属性值是可计算的具体数值，auto属于不确定值，浏览器无法计算从auto到0的过渡动画，会直接跳变到目标状态。
• visibility: hidden会瞬间隐藏元素：visibility属性是即时生效的，当添加.hidden类时，元素会立刻变得不可见，导致opacity的过渡效果还没开始就被中断，用户完全看不到动画过程。

另外，JS代码里同时调用两次toggleClass（比如toggleClass("shown").toggleClass("hidden")）逻辑略显冗余，若初始类设置不当还可能引发异常。

修复方案 #

1. 用max-height替代height: auto实现高度过渡

给元素设置足够容纳内容的max-height，通过过渡max-height模拟高度的展开/收起：

/* 默认隐藏状态 */
.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* 显示状态 */
.shown {
    opacity: 1;
    max-height: 500px; /* 根据实际内容调整数值 */
    visibility: visible;
    transition: all 0.3s ease;
}

2. 延迟visibility的切换时机

通过transition-delay让visibility的变化在opacity过渡完成后执行，确保透明度动画能被看到：

.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    /* 先过渡透明度和高度，延迟隐藏visibility */
    transition: opacity 0.3s ease, max-height 0.3s ease, visibility 0s 0.3s;
}

.shown {
    opacity: 1;
    max-height: 500px;
    visibility: visible;
    /* 显示时立即让元素可见，再过渡其他属性 */
    transition: opacity 0.3s ease, max-height 0.3s ease, visibility 0s;
}

3. 简化JS类切换逻辑

无需同时切换两个类，一次toggleClass即可完成状态切换：

$("#cancelLogin").click(function(){
    $('form.login').toggleClass("hidden shown");
    $('.circles').toggleClass("concealed shown");
});

内容的提问来源于stack exchange，提问作者s.k.paul