Bagaimana untuk Mengalihkan Sifat `paparan` dan `kelegapan` CSS dengan lancar pada Tuding?

Mentransisikan Paparan CSS dan Sifat Kelegapan Dengan Lancar

Dalam bidang animasi CSS3, isu timbul apabila cuba mengalihkan berbilang sifat, khususnya paparan dan kelegapan. Seperti yang anda serlahkan, apabila sifat paparan diubah suai semasa tuding, ia mengganggu peralihan kelegapan yang lancar.

Untuk menyelesaikan dilema ini, penyelesaian kreatif telah dicipta. Dengan menggunakan peraturan @keyframes, kami pada asasnya menentukan animasi tersuai yang meniru rupa peralihan sifat paparan. Caranya ialah dengan anggun beralih daripada "display: none" kepada "display: block" sambil mengawal kelegapan elemen.

Kod CSS diubah suai yang dibentangkan oleh Michael berfungsi sebagai penyelesaian yang elegan:

<code class="css">.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}</code>

Dalam kod ini, peraturan @keyframes mentakrifkan animasi bernama "fadeInFromNone" yang mengalihkan kelegapan elemen daripada 0 kepada 1 sambil pada masa yang sama menetapkan sifat paparan kepada "sekat" daripada "tiada". Fungsi pemasaan dan pelonggaran boleh dilaraskan seperti yang dikehendaki.

Dengan melaksanakan penyelesaian ini, anda boleh dengan mudah mengalihkan kedua-dua ciri paparan dan kelegapan, memastikan kesan yang licin dan menawan secara visual semasa tuding.

Atas ialah kandungan terperinci Bagaimana untuk Mengalihkan Sifat `paparan` dan `kelegapan` CSS dengan lancar pada Tuding?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!