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

Patricia Arquette
Lepaskan: 2024-11-01 00:31:28
asal
872 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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan