CSS实现hover过渡时描述元素突然出现的问题排查与修复

• 核心原因是display属于离散不可动画属性，不存在中间过渡状态。你给描述元素默认设置了display: none，悬停时切换为display: block，浏览器会在状态切换的第一帧直接将元素插入渲染树，不会对这个属性变化做插值计算。哪怕你给top属性设置了过渡，元素也是先瞬间出现在页面上，再执行位移动画，自然会有突兀弹出的效果。
• 次要问题是你将transition规则写在了:hover状态下，只有鼠标悬停在卡片上时元素才会加载过渡配置，鼠标移出时过渡规则失效，后续反向动画也会出现异常。

不要用display控制元素显隐，改用支持过渡的属性组合实现显隐效果，同时将过渡规则移到元素默认样式中：

1. 删除描述元素默认的display: none，替换为opacity: 0（控制透明度，支持平滑过渡）+ visibility: hidden（控制元素隐藏时不响应交互，避免遮挡其他元素）
2. 将所有transition规则从:hover状态移动到对应元素的基础样式中，保证悬停、移出两个方向的动画都能正常生效
3. 给info容器增加overflow: hidden，避免非悬停状态下内部元素溢出容器显示

修复后的完整CSS代码如下：

.article-card{
    background-image: url(" ");
    -webkit-box-shadow: 0px 0px 20px 1px #919191; 
    box-shadow: 0px 0px 20px 1px #919191;
    width: 30vh;
    height: 40vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

.article-card-info{
    position: relative;
    top: 18vh;
    height: 10vh;
    background-color: white;
    overflow: hidden;
    transition: 0.3s ease;
}
.article-card-title{
    color: #1a2434;
    text-align: center;
    padding-top: 2vh;
    font-size: 1rem
}

.article-card-description{
    /* 移除display: none，改用可过渡的显隐属性组合 */
    opacity: 0;
    visibility: hidden;
    position: relative;
    top: 10vh;
    text-align: center;
    font-size: 0.6rem;
    font-family: 'Zona Pro Thin';
    font-weight: 1000;
    color: #1a2434;
    margin: 2px;
    /* 过渡规则写在基础样式中 */
    transition: 0.3s ease;
}

.article-card:hover .article-card-info{
    height: 15vh;
    top:13vh;
}

.article-card:hover .article-card-description{
    opacity: 1;
    visibility: visible;
    top: 1vh;
}

原有HTML结构不需要做任何调整，即可实现描述元素跟随容器平滑入场、移出的效果。

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