如何修复CSS hover状态退出时无平滑过渡的问题

问题描述 #

当前实现了div容器hover时的ease-in-out过渡效果，但离开容器后，元素直接恢复到无锥形渐变边框的原始状态，没有过渡效果。尝试给div类本身或::before伪元素设置transition，但仅hover时过渡生效，离开时无效。

原因分析 #

问题出在非hover状态下的::before伪元素未定义hover时修改的属性初始值。当鼠标离开时，background、transform、filter、clip-path这些属性会从hover状态的值直接跳转到浏览器默认值（比如background: transparent、transform: none），由于初始状态未声明这些属性，浏览器无法计算过渡动画，导致直接恢复原始状态。

解决方案 #

在::before伪元素的基础样式中，声明所有hover时会修改的属性的初始值，让浏览器能识别属性的变化范围，从而在离开hover时触发过渡效果。

修改后的代码 #

.wp-block-group.has-base-background-color.has-background.is-layout-flow.wp-container-7.wp-block-group-is-layout-flow::before {
    content: "";
    position: absolute;
    inset: 0;
    transition: all .2s ease-in-out;
    /* 声明hover时会变化的属性初始值 */
    background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
    transform: translate3d(0,0,0);
    filter: blur(0);
    clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0);
    opacity: 0;
}

.wp-block-group.has-base-background-color.has-background.is-layout-flow.wp-container-7.wp-block-group-is-layout-flow:hover::before {
    transform: translate3d(0,0,-1px);
    filter: blur(10px);
    opacity: 1;
}

补充说明 #

• 过渡效果必须依赖属性的“初始值”和“目标值”都被明确声明，浏览器才能计算中间的过渡动画
• 若想优化性能，可把transition: all .2s ease-in-out改为指定属性，比如transition: opacity .2s ease-in-out, transform .2s ease-in-out, filter .2s ease-in-out

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