cari

Rumah  >  Soal Jawab  >  teks badan

Mengapa kefungsian undur perlahan dalam fungsi animasi saya tidak berfungsi?

Saya tidak faham mengapa div kembali ke keadaan biasa tanpa animasi. Saya mencuba segala-galanya
Ini kod saya:

Saya telah mencari di banyak tempat tetapi tidak menemui masalahnya.

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

Ini css saya:

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

}

Saya cuba menukar ketinggian daripada 250px kepada 850px dalam 1 saat dan kembali kepada 250px dalam 1 saat

P粉958986070P粉958986070435 hari yang lalu581

membalas semua(1)saya akan balas

  • P粉533898694

    P粉5338986942023-09-21 16:01:34

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

    balas
    0
  • Batalbalas