Animasi asas adalah mudah: Tentukan kerangka utama, animasi nama, dan gunakannya kepada elemen. Tetapi kadang -kadang teknik yang lebih kompleks diperlukan untuk mencapai kesan animasi yang ideal. Sebagai contoh, penyamaan bunyi mungkin menggunakan animasi yang sama untuk setiap bar, tetapi mereka bersambung untuk mencipta ilusi animasi bebas.

Baru -baru ini apabila membina papan pemuka, saya mahu item salah satu widget yang akan dipaparkan dalam animasi interlaced.

Seperti penyamaan bunyi di atas, saya mula menggunakan pemilih :nth-child . Saya menggunakan senarai yang tidak teratur (<ul></ul> ) Sebagai bekas induk, berikannya kelas dan gunakan :nth-child untuk mengimbangi animasi setiap item senarai oleh animation-delay .

 .my-list li {
  Animasi: My-Animation 300ms mudah keluar;
}

.my-list li: nth-child (1) {
  Animasi-Delay: 100ms;
}

.my-list li: nth-child (2) {
  Animasi-Delay: 200ms;
}

.my-list li: nth-child (3) {
  Animasi-Delay: 300ms;
}

/* dan sebagainya*/

Teknik ini melakukan perkara -perkara yang sangat baik, terutamanya jika anda tahu berapa banyak item dalam senarai pada bila -bila masa. Walau bagaimanapun, pendekatan ini gagal apabila bilangan item tidak dapat diramalkan (ini berlaku dengan widget yang saya bina untuk papan pemuka). Saya benar -benar tidak mahu kembali ke kod ini setiap kali bilangan item dalam senarai berubah, jadi saya menulis gelung sass cepat yang boleh mengendalikan sehingga 50 item dan menambah latensi animasi kerana setiap item meningkat:

 .my-list {
  li {
    Animasi: My-Animation 300ms mudah keluar;

    @for $ i dari 1 hingga 50 {
      &: nth-child (#{$ i}) {
        Animasi-Delay: 100ms * $ i;
      }
    }
  }
}

Ini harus menyelesaikan masalah! Walau bagaimanapun, ia terasa terlalu kekok. Sudah tentu, ia tidak akan menambah berat badan kepada fail, tetapi anda tahu bahawa CSS yang disusun akan mengandungi banyak pemilih yang tidak digunakan, seperti nth-child(45) .

Mesti ada cara yang lebih baik. Biasanya saya akan beralih kepada JavaScript untuk mencari semua projek dan menambah kelewatan, tetapi ... kali ini saya meluangkan sedikit masa meneroka jika ia dapat dilakukan bersendirian dengan CSS.

Bagaimana dengan kaunter CSS?

Perkara pertama yang masuk ke dalam fikiran ialah menggunakan kaunter CSS dengan fungsi calc() :

 .my-list {
  Kaunter-reset: my-counter;
}

.my-list li {
  Kaunter-Penangkapan: My-Counter;
  Animasi-Delay: Calc (Counter (My-Counter) * 100ms);
}

Malangnya, ini tidak berfungsi, kerana spesifikasi menyatakan bahawa kaunter tidak boleh digunakan dalam calc() :

Komponen ekspresi calc() boleh menjadi nilai literal atau ungkapan attr() atau calc() .

Ternyata sesetengah orang suka idea itu, tetapi ia tidak keluar dari peringkat draf.

Bagaimana dengan atribut data?

Selepas membaca petikan daripada spesifikasi, saya belajar bahawa calc() boleh menggunakan attr() . Dan, mengikut nilai CSS dan spesifikasi unit:

Dalam CSS3, ungkapan attr() dapat mengembalikan pelbagai jenis nilai

Ini mengingatkan saya; Mungkin atribut data dapat menyelesaikan masalah ini.

• Perkara 1
• Perkara 2
• Perkara 3
• Perkara 4

.my-list li {
  Animasi-Delay: Calc (attr (data-count) * 150ms);
}

Tetapi harapan saya putus -putus kerana sokongan penyemak imbas ini sangat buruk!

Penyemak imbas ini menyokong data dari CANIUSE, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dalam versi ini dan kemudian.

Desktop

PC mudah alih/tablet

Jadi, kembali ke papan lukisan.

Bagaimana dengan sifat tersuai?

Idea saya yang seterusnya ialah menggunakan CSS untuk menyesuaikan sifat. Ia tidak cantik, tetapi ia berfungsi?

Ternyata ia fleksibel juga. Sebagai contoh, animasi boleh dibalikkan:

Ia juga boleh melakukan sesuatu yang benar -benar rawak dan elemen bernyawa pada masa yang sama:

Kita juga boleh melangkah lebih jauh dan melakukan ayunan pepenjuru:

Sokongan penyemak imbas bukanlah yang buruk ( Pop Up Internet Explorer ).

Penyemak imbas ini menyokong data dari CANIUSE, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dalam versi ini dan kemudian.

Desktop

PC mudah alih/tablet

Ciri hebat CSS adalah bahawa ia mengabaikan perkara yang tidak difahami, terima kasih kepada Cascading. Ini bermakna segala -galanya akan bernyawa ke pandangan bersama. Jika ini bukan gaya anda, anda boleh menambah pertanyaan ciri untuk mengatasi animasi lalai:

 .my-list li {
  Animasi: animasi-animasi;
}

@Supports (--variables) {
  .my-list li {
    animasi: animasi mewah;
    animasi-delay: calc (var (-animasi-pesanan) * 100ms);
  }
}

CSS asli lama hidup

Semakin saya berhenti untuk bertanya kepada diri sendiri jika saya memerlukan JavaScript, semakin saya terkejut dengan apa yang CSS sendiri boleh lakukan. Sudah tentu, jika kaunter CSS boleh digunakan dalam fungsi calc() , itu akan menjadi penyelesaian yang sangat elegan. Tetapi buat masa ini, sifat tersuai dalam talian menyediakan cara yang kuat dan fleksibel untuk menyelesaikan masalah ini.

Atas ialah kandungan terperinci Pendekatan yang berbeza untuk membuat animasi yang terhuyung -huyung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!