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

Susan Sarandon
Lepaskan: 2024-10-30 04:57:03
asal
191 orang telah melayarinya

How can I create smooth CSS transitions when changing both display and opacity?

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;
}
Salin selepas log masuk

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;
    }
}
Salin selepas log masuk

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!

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
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!