Warum funktioniert die Funktion zum langsamen Zurückspulen in meiner Animationsfunktion nicht?

Question

Ich verstehe nicht, warum das Div ohne Animation in seinen Normalzustand zurückkehrt. Ich habe alles versucht
Das ist mein Code:

Ich habe an vielen Stellen gesucht, kann das Problem aber nicht finden.

<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>

Das ist mein 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));

}

Ich versuche, die Höhe in 1 Sekunde von 250 Pixel auf 850 Pixel und in 1 Sekunde wieder auf 250 Pixel zu ändern

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>