Bagaimanakah Saya Boleh Mencipta Animasi CSS Berperingkat untuk Berbilang Elemen Kanak-kanak dengan Cekap?

Animasi CSS dengan Kelewatan Berperingkat untuk Elemen Kanak-kanak

Anda menyasarkan untuk mencipta kesan melata di mana setiap elemen kanak-kanak dalam elemen bernyawa dengan kelewatan. Untuk mencapai matlamat ini, anda telah menetapkan kelewatan animasi secara manual untuk setiap kanak-kanak secara individu, seperti yang dilihat dalam coretan kod anda. Walau bagaimanapun, anda sedang mencari penyelesaian yang lebih cekap untuk menggunakan kelewatan secara dinamik berdasarkan bilangan elemen anak.

Penyelesaian CSS menggunakan gelung Sass for menawarkan pendekatan yang ringkas dan berskala untuk masalah ini:

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}

Gelung ini berulang dari 1 hingga 10 (boleh laras untuk menampung bilangan elemen anak yang dijangkakan) dan memberikan nilai kelewatan yang dikira kepada setiap kanak-kanak menggunakan pemilih anak ke-n. Kelewatan dikira dengan mendarab indeks kanak-kanak ($i) dengan tempoh kelewatan yang diingini (0.5 saat dalam contoh ini).

Dengan menggunakan gelung ini, anda boleh menggunakan kelewatan berlatarkan pada sebarang bilangan elemen kanak-kanak tanpa secara manual menulis gaya individu. Penyelesaian ini menghapuskan keperluan untuk menentukan gaya secara eksplisit untuk setiap kanak-kanak dan memastikan konsistensi merentas semua elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Animasi CSS Berperingkat untuk Berbilang Elemen Kanak-kanak dengan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!