為什麼我的動畫函數中的慢速倒帶功能不起作用？

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>