Bagaimanakah Saya Boleh Mencetuskan Animasi CSS3 Hanya Apabila Elemen Tatal ke Paparan?

Mengaktifkan Animasi CSS3 Apabila Kandungan Ditatal ke Paparan

Apabila kedudukan elemen melangkaui port pandangan, ia menjadi tersembunyi daripada pandangan. Untuk mengoptimumkan prestasi, animasi CSS3 boleh dimulakan hanya apabila elemen muncul dalam port pandangan. Ini amat berguna untuk elemen yang diletakkan jauh di bawah halaman dengan kandungan yang besar di atasnya.

Untuk mencapainya, kami menggunakan JavaScript atau jQuery untuk menangkap acara tatal. Sebaik sahaja peristiwa tatal dicetuskan, kod menyemak sama ada elemen yang disasarkan telah menatal ke dalam port pandangan. Jika ya, kelas petunjuk ditambahkan pada elemen, menggesa animasi untuk dimulakan.

Kod Pelaksanaan:

HTML:

<div class="bar">
    <div class="level eighty">80%</div>
</div>

CSS:

.eighty.start {
    width: 0px;
    background: #aae0aa;
    -webkit-animation: eighty 2s ease-out forwards;
       -moz-animation: eighty 2s ease-out forwards;
        -ms-animation: eighty 2s ease-out forwards;
         -o-animation: eighty 2s ease-out forwards;
            animation: eighty 2s ease-out forwards;
}

jQuery:

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Scroll position
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Element position
    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return (elemTop < viewportBottom) && (elemBottom > viewportTop);
}

function checkAnimation() {
    var $elem = $('.bar .level');

    if ($elem.hasClass('start')) return;
    
    if (isElementInViewport($elem)) {
        $elem.addClass('start');
    }
}

$(window).scroll(function(){
    checkAnimation();
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetuskan Animasi CSS3 Hanya Apabila Elemen Tatal ke Paparan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!