Bagaimana cara menghilangkan efek kesalahan jquery?

Saya menggunakan animasi jquery untuk menambah lebar dan tinggi div. Animasi terpicu saat mengklik kotak dan kemudian dikembalikan ke ukuran aslinya saat mengklik ikon belakang font mengagumkan yang muncul.

html:

<body>
<div class="flex-container">
        <div class="flex-items">
    <i class="fa fa-reply fa-2x"></i>1
</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>2</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>3</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>4</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>5</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>6</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>7</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>8</div>
    </div>
</body>

css:

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: lightblue;
}
.flex-container{
    display: flex;
    width: 90vw;
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 20px;
}
.flex-items{
    width: 350px;
    height: 350px;
    border: 1px solid black;
    order: 1;
}
i{
    visibility: hidden;
    float: right;
}
.header{
    height: 50px;
    background-color: #333;
}
.headerText{
    margin-left: 40px;
    color: white;
}

jquery:

$(document).ready(function(){
    $(".flex-items").click(function(){
        console.log(this.css);
        $(this)
        .animate({
            width: '100vw',
            height: '100vh'},{
            duration: 300,
            ease: "slow"})  
        .css("order", "0");

        i = $(this).children();
        $(i).css("visibility" ,"initial");
    });
    $("i").click(function(evt){
            evt.stopPropagation();
            $(".flex-items").animate({
            width: '300px',
            height: '300px'},{
            duration: 300,
            ease: "linear"})
            .css("order", "1");
            $(this).css("visibility" ,"hidden");
    });
});

Ada jenis efek 'gangguan' yang terjadi saat Anda menutup div dan kembali ke keadaan semula. Apakah ada cara untuk membuat transisi ini lebih lancar?

Codepen


animation html jquery css
person Froy    schedule 15.03.2016    source sumber
comment
Lihat jawaban ini: stackoverflow.com/questions/29625037/   -  person Christian Bonato    schedule 15.03.2016
comment
Saya pikir ini terjadi karena Anda menyesuaikan beberapa nilai yang sangat mempengaruhi tata letak halaman. Saya pikir solusinya mungkin melibatkan segera mempengaruhi tata letak teknis, dan kemudian secara bertahap mentransisikan faktor tata letak yang terlihat. Misalnya, Anda dapat memiliki wadah dengan tepian yang langsung memperoleh ketinggian baru, namun kontennya diperbesar dari keadaan kecil. Perhatikan bahwa paragraf multibaris apa pun mungkin akan disesuaikan ulang beberapa kali jika skalanya juga ditingkatkan.   -  person Katana314    schedule 15.03.2016
comment
@ChristianBonato itulah yang saya cari. Saya awalnya mencoba menggunakan flex-grow tetapi tidak berhasil. Terima kasih!   -  person Froy    schedule 15.03.2016

Jawaban (2)


arrow_upward
1
arrow_downward

Jangan lupa bahwa flexbox juga dapat diterjemahkan menggunakan transform:translate3d([whatever vertical], [whatever horizontal], [set to 0 to make sure we're requiring GPU through "3d"]), memberi Anda akses ke grid flexbox yang kompleks, di mana beberapa panel flex mungkin elastis sehingga menyusut/berkembang, dan panel lainnya dapat meluncur ke atas/bawah panel flex lainnya (dengan sedikit bantuan dari z-index).

person Christian Bonato    schedule 15.03.2016

arrow_upward
0
arrow_downward

Gunakan transisi css karena sebagian besar waktu lebih lancar. transition:all 0.3s ease; Contoh saya memerlukan beberapa penyesuaian tetapi berhasil Codepen

person Reyno    schedule 15.03.2016