为什么我的动画函数中的慢速倒带功能不起作用？

Question

我不明白为什么div没有动画地恢复正常状态。我尝试了一切
这是我的代码：

我在很多地方查找了，但就是找不到问题。

<div id="quadro_tudo">
            <div id="esq" class="btn" onclick="rolada(this)"></div>
            <div id="slides">
                <div id="imagens">
                   <img src="imagens/image1.png" alt="">
                   <img src="imagens/image2.png" alt="">
                   <img src="imagens/image3.png" alt="">
                </div>
            </div>
            <div id="dir" class="btn" onclick="rolada(this)"></div>
        </div>

这是我的css：

*{
    margin: 0px;
    padding: 0px;
}
main{
    width: 600px;
    margin: auto;
}
div#slides{
    display: flex;
    width: 600px;
    height: 250px;
    overflow: hidden;
    position: absolute;
}
div#slides:hover{
    height: 850px;
    transition: all 1s ease-in-out 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));

}

我试图在1秒内将高度从250px过渡到850px，然后再在1秒内过渡回250px

Answer 1

你应该将 transition 属性添加到 div#slides 而不是 div#slides:hover。

* {
   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;
}

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));
}

<div id="quadro_tudo">
   <div id="esq" class="btn" onclick="rolada(this)"></div>
   <div id="slides">
      <div id="imagens">
         <img src="imagens/image1.png" alt="" />
         <img src="imagens/image2.png" alt="" />
         <img src="imagens/image3.png" alt="" />
      </div>
   </div>
   <div id="dir" class="btn" onclick="rolada(this)"></div>
</div>