Bagaimanakah saya boleh mencipta peralihan CSS yang lancar apabila menukar paparan dan kelegapan?

Mencipta Peralihan CSS Lancar dengan Perubahan Paparan dan Kelegapan

Dalam dunia pembangunan web, mencipta antara muka pengguna yang menarik secara visual dan interaktif adalah penting. Animasi CSS memainkan peranan penting dalam mencapai perkara ini, membolehkan kami melakukan peralihan dengan lancar antara keadaan elemen yang berbeza.

Apabila bekerja dengan animasi CSS3, ia adalah perkara biasa untuk menghadapi situasi di mana anda perlu mengalihkan berbilang sifat, seperti kelegapan dan paparan. Walau bagaimanapun, menggabungkan sifat ini boleh menjadi rumit, kerana peralihan sifat paparan secara langsung boleh mengakibatkan perubahan mendadak.

Pertimbangkan kod CSS berikut:

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

Kod ini bertujuan untuk pudar dalam elemen dengan kelas 'kanak-kanak' di tuding. Walau bagaimanapun, ia gagal berfungsi dengan betul kerana peralihan langsung sifat paparan daripada 'tiada' kepada 'sekat' mencipta penampilan yang mendadak.

Untuk menangani isu ini, kami boleh memanfaatkan kerangka utama CSS untuk mencapai peralihan yang lancar antara kedua-dua negeri itu. Kod berikut menunjukkan pendekatan ini:

.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;
    }
}

Dalam kod ini, animasi bingkai utama 'fadeInFromNone' digunakan untuk mengalihkan kelegapan daripada 0 kepada 1 sambil turut menetapkan sifat paparan kepada 'sekat' pada 1% kepada elakkan penampilan mendadak.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta peralihan CSS yang lancar apabila menukar paparan dan kelegapan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!