父元素hover时子元素Transition属性失效问题求助

我尝试在父元素title-wrapper被hover时，为子元素scroll-items添加过渡效果，但Transition未按预期生效。将过渡函数从linear改为ease-in-out后仅生效一次，后续visibility切换变为瞬时效果，控制台中CSS样式已正确应用。

React代码 #

import React from 'react'
import '../MainLayout/MainLayout.css'
const MainLayout = () => {
    return (
        <div>
            <div className='title-wrapper'>
                <div style={{display:'flex', flexDirection:'column' }}>
                    <p className='title-heading'>Let's</p>
                    <p className='title-heading-middle'>Animate</p>
                    <p className='title-heading'>using CSS</p>
                </div>
                <div className='scroll-items'>
                    <div className='item' />
                    <div className='item' />
                    <div className='item' />
                    <div className='item' />
                    <div className='item' />
                    <div className='item' />
                </div>
            </div>
        </div>
    )
}

export default MainLayout

原CSS代码 #

.title-wrapper {
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    max-height: fit-content;
}

.title-wrapper::before {
    content: "";
    position: absolute;
    z-index: -5;
    background: dodgerblue;
    transition: transform 0.4s ease;
    transform: scaleX(0);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0 0 0 0;
    transform-origin: right;
}

.title-wrapper:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.title-wrapper:hover .title-heading {
    color: white;
}
.title-wrapper:hover .title-heading-middle {
    color: white;
}
.scroll-items {
    margin: 1rem;
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: black;
    opacity: 0;
    visibility: hidden;
    min-width: 400px;
    min-height: 100%;
    transition: opacity 0.5s, linear;
}

.title-wrapper:hover .scroll-items {
    visibility: visible;
    opacity: 1;
}

.item{
    background-image: url('../../assets/animate.jpg');
    margin: 5px;
}

解决方案 #

问题源于过渡语法错误和未对visibility添加过渡支持，修正后即可实现每次hover都触发完整的显示/隐藏过渡：

修改后的CSS关键部分 #

.scroll-items {
    margin: 1rem;
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: black;
    opacity: 0;
    visibility: hidden;
    min-width: 400px;
    min-height: 100%;
    /* 修正过渡语法，同时为visibility添加过渡，确保与opacity同步 */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.title-wrapper:hover .scroll-items {
    visibility: visible;
    opacity: 1;
}

原因说明 #

1. 语法错误修正：原代码中transition: opacity 0.5s, linear;是无效写法，正确格式应为每个过渡属性对应「时长+缓动函数」，或统一为所有属性设置相同规则（如transition: all 0.5s ease-in-out;）。
2. visibility过渡支持：虽然visibility是离散属性，但CSS允许为其添加过渡。配合opacity使用时，visibility会在opacity过渡结束后才切换状态，避免鼠标离开时元素瞬时消失，保证过渡效果的完整性。

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