为何给:checked类设置CSS过渡完全无效？

问题核心：display属性是离散值，不支持CSS过渡；且元素设为display: none时，opacity的过渡不会触发——因为元素不在文档流中，过渡效果无法生效。

修正思路 #

用visibility替代display控制元素可见性，配合opacity实现淡入淡出，同时通过过渡延迟（transition-delay）控制属性变化顺序：

• 隐藏状态：visibility: hidden + opacity: 0，设置延迟让visibility在opacity过渡完成后再隐藏
• 显示状态：visibility: visible + opacity: 1，取消延迟让visibility立即生效，再过渡opacity

修改后的CSS代码 #

/* 隐藏单选框 */
.rbTab {
    display: none;
}

/* 标签页容器基础样式 */
.ContentTab {
    visibility: hidden;
    opacity: 0;
    width: 630px;
    height: 180px;
    background-color: #FFFFFF;
    /* 隐藏时：先过渡opacity，延迟visibility的隐藏 */
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}

/* 标签标题栏样式 */
.TitleTab {
    width: 630px;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
}

/* 选中状态的标签页（合并重复选择器减少冗余） */
.rbTab1:checked ~ .ContentTab1,
.rbTab2:checked ~ .ContentTab2,
.rbTab3:checked ~ .ContentTab3,
.rbTab4:checked ~ .ContentTab4,
.rbTab5:checked ~ .ContentTab5,
.rbTab6:checked ~ .ContentTab6 {
    visibility: visible;
    opacity: 1;
    /* 显示时：立即显示visibility，同时过渡opacity */
    transition: opacity 0.5s ease;
}

补充说明 #

• visibility: hidden不会将元素移除出文档流，只是让它不可见，因此opacity的过渡能正常触发
• 过渡时长（示例中0.5s）可根据需求自行调整

内容的提问来源于stack exchange，提问作者Stefan Steiger