Bar pemasa di CSS dengan sifat tersuai

Baru -baru ini saya perlu melaksanakan pemasa yang kelihatan dalam projek ini, dan sudah ada reka bentuk UI pemasa yang sama dalam projek itu sebagai rujukan. Pengguna tidak perlu melihat nombor berkurangan, tetapi ingin melihat "bar" secara beransur -ansur berkurangan dari penuh ke kosong. Saya menyebut ini kerana terdapat banyak cara untuk melaksanakan UI "pemasa". Artikel ini bukan mengenai semua kaedah ini (hasil carian pada codepen akan lebih membantu), tetapi sebaliknya tentang satu yang berfungsi dengan baik untuk saya.

Jenis pemasa yang saya perlukan adalah apa yang dipanggil bar "giliran masa" dalam projek. Melaksanakan tindakan boleh mencetuskan masa giliran, dan kebanyakan tindakan berikutnya akan disekat sehingga akhir masa giliran. Oleh itu, pemasa bar merah yang jelas adalah pilihan UI yang betul. Ia memberi orang rasa irama dan aliran, anda boleh "merasakan" masa akhir pemasa dan menjadualkan operasi seterusnya anda.

Menetapkan pemasa ini agak mudah ...

Mari buat struktur elemen ibu bapa/kanak -kanak sekiranya kita perlu gaya bahagian kosong bekas pada masa akan datang.

<div>
  <div></div>
</div>

Sekarang, kita hanya gaya bar dalaman.

 .Round-Time-Bar Div {
  Ketinggian: 5px;
  Latar Belakang: Linear-Gradient (ke bawah, merah, #900);
}

Ini memberi kita bar merah yang bagus yang boleh digunakan sebagai penunjuk masa.

Seterusnya, kita perlu membiarkannya dikira, tetapi di sini kita perlu mempertimbangkan fungsi. Pemasa semacam itu perlu tahu berapa lama masa yang diperlukan! Kami boleh memberikan maklumat ini secara langsung dalam HTML. Ini tidak bermakna kita mengelakkan menggunakan JavaScript - kita memeluknya . Kami berkata, "Hei, JavaScript, tolong beri kami pemboleh ubah tempoh dan kami akan mengendalikan yang lain."

<div style="--duration: 5;">
  <div></div>
</div>

Malah, pendekatan ini sangat sesuai untuk pengendalian DOM moden JavaScript. Selagi- --variable adalah betul, ia boleh menjadikan semula elemen DOM pada bila-bila masa, dan kami dapat memastikan reka bentuk mengendalikan keadaan ini dengan baik. Kami akan membuat variasi seperti ini.

Sekarang, mari kita mulakan animasi. Berita baiknya, ia mudah. Ini adalah kerangka utama baris:

 @KeyFrames Roundtime {
  ke {
    /* Lebih efisien daripada animasi `lebar`*/
    Transform: Scalex (0);
  }
}

Kita boleh "memampatkan" bar kerana gaya bar tidak kelihatan dimampatkan apabila kita skala secara mendatar. Jika kita melakukan ini, kita boleh menghidupkan lebarnya. Ini bukan masalah yang besar, terutamanya kerana ia tidak akan menyesuaikan semula susun atur apa -apa lagi.

Sekarang kita memohon kepada bar:

 .Round-Time-Bar Div {
  / * ... */
  Animasi: Calc Roundtime (Var (-Durasi) * 1s) Langkah-langkah (var (-Durasi)) ke hadapan;
  Transform-Origin: Pusat Kiri;
}

Lihat bagaimana kita menggunakan pembolehubah --duration untuk menetapkan tempoh animasi? Ini mencapai sebahagian besar kerja. Saya juga menggunakannya untuk menetapkan bilangan steps() supaya pengurangan "grid oleh grid". "Bid-by-frame" mungkin kesan UI visual yang anda suka (saya suka), tetapi ia juga menyesuaikan diri dengan idea bahawa JavaScript boleh membuat semula bar ini pada bila-bila masa, dan bingkai bingkai membuatnya tidak dapat diperhatikan. Saya menggunakan integer sebagai nilai tempoh supaya kedua -duanya boleh menggunakannya seperti ini.

Walau bagaimanapun, jika anda mahukan animasi yang lancar, kita boleh melakukan ini, sebagai contoh:

<div ...="" data-style="smooth"></div>

Maka jangan gunakan steps :

 .Round-time-bar [data-style = "smooth"] div {
  Animasi: Calc Roundtime (Var (-Durasi) * 1s) Linear Forward;
}

Perhatikan bahawa kami juga menggunakan animasi linear, yang nampaknya masuk akal untuk pemasa. Masa, suka, tidak akan senang. Atau adakah ia? Bagaimanapun, ini adalah pilihan anda. Jika anda mahu pemasa yang kelihatan seperti pecutan atau penurunan pada titik tertentu, pergi untuk itu.

Kita boleh menggunakan API berasaskan data-attribute yang sama untuk melaksanakan perubahan warna:

 .Round-time-bar [data-color = "blue"] div {
  Latar Belakang: Linear-Gradient (ke bawah, #64B5F6, #1565C0);
}

Varian terakhir adalah untuk menetapkan lebar setiap "kedua". Dengan cara ini, pemasa 10 saat akan kelihatan lebih lama daripada pemasa 5 saat:

 .Round-time-bar [data-style = "fixed"] div {
  lebar: calc (var (-durasi) * 5%);
}

Berikut adalah demonstrasi:

Perhatikan petua untuk memulakan semula animasi CSS.

Oh, dengan cara ini, saya tahu ada satu<meter></meter> Unsur, ia mungkin lebih semantik, tetapi UI sendiri tidak boleh bernyawa seperti yang saya mahu di sini - sekurang -kurangnya tidak melawannya. Tetapi saya tidak tahu sama ada ia lebih mudah diakses? Adakah ia mengisytiharkan nilai semasa dengan cara yang berguna? Sekiranya kita menggunakan JavaScript untuk dikemas kini dalam masa nyata<meter></meter> , adakah ia menjadi pemasa yang lebih mudah diakses? Jika ada yang tahu, saya boleh menghubungkan penyelesaian di sini.

Atas ialah kandungan terperinci Bar pemasa di CSS dengan sifat tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!