Bagaimana Mencetuskan Animasi CSS3 Hanya Apabila Elemen Ditatal ke Paparan?

Mencetuskan Animasi CSS3 pada Tatal

Masalah:

Carta bar animasi dimuatkan sebelum kandungan ditatal ke paparan, menghasilkan terlepas animasi.

Penyelesaian:

Untuk mengaktifkan animasi CSS3 semasa tatal ke paparan:

1. Tangkap Acara Tatal

Laksanakan pendengar acara JavaScript atau jQuery yang memantau acara tatal.

2. Semak Keterlihatan Elemen

Untuk setiap acara tatal, semak sama ada elemen (carta bar) boleh dilihat dalam port pandangan pengguna.

3. Mulakan Animasi

Setelah elemen kelihatan (cth., apabila isElementInViewport()) kembali benar), mulakan animasi dengan menggunakan kelas CSS yang sesuai (cth., "start") .

Contoh Kod:

<!-- 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) {
    // Calculate element and viewport positions
    // ...

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

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

    // Prevent redundant animation start
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

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

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