为何我的div高度过渡动画无法缓慢回退？

安全阿岳

2026-7-14

解决hover移出时无过渡动画的问题

核心原因：你仅在#slides:hover规则中定义了transition属性，当鼠标移出时，元素回到默认样式状态，但默认样式没有过渡配置，导致高度瞬间变化，无动画效果。

修复方案

将transition属性移至#slides的基础样式中，确保移入、移出状态都能应用过渡动画；同时仅在hover状态添加延迟，实现移入等待0.5秒再动画，移出立即动画的效果。

修改后的关键代码：

div#slides{
    display: flex;
    width: 600px;
    height: 250px;
    overflow: hidden;
    position: absolute;
    /* 基础过渡：所有高度变化都应用1秒时长，无延迟 */
    transition: height 1s ease-in-out;
}
div#slides:hover{
    height: 850px;
    /* 仅hover时添加0.5秒延迟 */
    transition-delay: 0.5s;
}

完整修改后的CSS代码

*{
    margin: 0px;
    padding: 0px;
}
main{
    width: 600px;
    margin: auto;
}
div#slides{
    display: flex;
    width: 600px;
    height: 250px;
    overflow: hidden;
    position: absolute;
    transition: height 1s ease-in-out;
}
div#slides:hover{
    height: 850px;
    transition-delay: 0.5s;
}

div#imagens{
    display: flex;
    flex-direction: column;
    width: 600px;
    height: 850px;
    z-index: 1;
}
div#imagens > img{height: 850px;}
div#quadro_tudo{
    display: flex;
    margin: 500px 0px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
div.btn{
    height: 250px;
    width: 75px;
    z-index: 2;
    background-color: rgba(240, 248, 255, 0);
}
div.btn:hover{
    transition: 1s;
}
div.btn#esq:hover{
    background-image: linear-gradient(to right, purple, rgba(255, 255, 255, 0));
    transition-duration: 1s;

}
div.btn#dir:hover{
    background-image: linear-gradient(to left, purple, rgba(255, 255, 255, 0));

}