Bagaimana untuk Mencapai Peralihan Kelegapan Lancar Semasa Menukar Paparan CSS Secara Tiba-tiba?-tutorial css-php.cn

Bagaimana untuk Mencapai Peralihan Kelegapan Lancar Semasa Menukar Paparan CSS Secara Tiba-tiba?

Patricia Arquette

Lepaskan： 2024-11-01 00:31:28

asal

887 orang telah melayarinya

How to Achieve Smooth Opacity Transitions While Abruptly Changing CSS Display?

Mencipta Peralihan Lancar untuk Paparan CSS dan Sifat Kelegapan

Anda telah menghadapi isu semasa anda cuba menghidupkan paparan dan kelegapan sifat unsur, tetapi perubahan paparan mengganggu peralihan. Untuk mencapai hasil yang diingini, apabila kelegapan beralih dengan lancar semasa sifat paparan berubah secara mendadak, anda boleh menggunakan penyelesaian berikut:

Respon Michael menawarkan pendekatan kod CSS yang komprehensif:

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

Salin selepas log masuk

Ini kod menggunakan bingkai utama untuk menghidupkan kelegapan dan memaparkan sifat secara berasingan. Sifat paparan berubah secara mendadak daripada tiada kepada menyekat pada 0%, manakala kelegapan beralih dengan lancar daripada 0 kepada 1 dalam tempoh 0.5 saat mengikut fungsi pelonggaran yang ditentukan.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Peralihan Kelegapan Lancar Semasa Menukar Paparan CSS Secara Tiba-tiba?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!