Bagaimana untuk mengalihkan kedua-dua ciri paparan dan kelegapan dalam animasi CSS dengan lancar?-tutorial css-php.cn

Bagaimana untuk mengalihkan kedua-dua ciri paparan dan kelegapan dalam animasi CSS dengan lancar?

Barbara Streisand

Lepaskan： 2024-11-02 16:37:31

asal

709 orang telah melayarinya

How to smoothly transition both display and opacity properties in CSS animations?

Mentransisikan Paparan CSS dan Sifat Kelegapan

Dalam animasi CSS, ia boleh menjadi mencabar untuk mengalihkan kedua-dua sifat paparan dan kelegapan secara serentak. Ini menjadi jelas apabila cuba untuk membuat elemen muncul dengan mengubah suai paparan dan nilai kelegapan semasa tuding, seperti yang dilihat dalam coretan kod yang diberikan:

.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 gagal untuk mengalihkan sifat paparan, menyebabkan berlakunya secara mendadak. penampilan unsur. Untuk mencapai peralihan yang lancar bagi kedua-dua sifat, teknik berikut disyorkan:

.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

Pendekatan ini menggunakan animasi CSS, fadeInFromNone, untuk mengawal peralihan kedua-dua sifat. Animasi bermula dengan elemen tersembunyi dan telus sepenuhnya (paparan: tiada; kelegapan:0). Ia kemudian secara ringkas menjadikan elemen kelihatan tetapi mengekalkan ketelusannya (paparan: blok; kelegapan:0) untuk mencetuskan peralihan paparan. Akhirnya, elemen menjadi kelihatan sepenuhnya dan legap (paparan: blok; kelegapan:1). Peralihan untuk paparan dan kelegapan boleh disesuaikan dengan melaraskan pemasaan dan fungsi pelonggaran dalam peraturan animasi.

Atas ialah kandungan terperinci Bagaimana untuk mengalihkan kedua-dua ciri paparan dan kelegapan dalam animasi CSS dengan lancar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!