React动态添加类实现带延迟的opacity过渡效果失效问题求助

问题根因 #

• 过渡规则transition没有提前定义在元素基础样式上：你将opacity的过渡规则写在了动态追加的.opacity_30类中，类追加和opacity属性变化同时触发时，过渡规则还未生效，浏览器无法捕获过渡过程，会直接跳变到目标透明度。
• 初始opacity未显式声明：基础类.loading-logo没有显式定义默认opacity:1，部分浏览器无法识别到opacity的前后变化差值，会跳过过渡逻辑。
• 多过渡规则覆盖：同时追加的.remove_padding_bottom类也定义了transition属性，两个类优先级相同时，后定义的过渡规则会覆盖前者，导致opacity的过渡规则失效。

修复方案 #

1. 修改基础类样式 #

在.loading-logo中显式声明初始透明度，同时将所有需要过渡的属性的规则统一写在基础类中，避免覆盖冲突：

.loading-logo {
    width: 60%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 10em;
    image-rendering: -moz-crisp-edges;
    image-rendering:   -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    /* 显式声明初始透明度 */
    opacity: 1;
    /* 分别定义两个属性的过渡规则，互不冲突 */
    transition: opacity 2s 5s, padding-bottom 3s;
}

2. 精简动态追加类的样式 #

删除追加类中的过渡规则，仅保留需要修改的属性值即可：

.opacity_30 {
    opacity: 0.3;
}

.remove_padding_bottom {
    padding-bottom: 0;
}

修改后当!loading触发类追加时，浏览器会按照基础类中定义的过渡规则，分别执行padding-bottom和延迟后的opacity过渡效果。

内容的提问来源于stack exchange，提问作者Kadiem Alqazzaz