Teknik CSS untuk kesan riak material

Panduan ke teknik yang berbeza untuk kesan riak menggunakan CSS dan JavaScript

Baru-baru ini saya terpaksa melaksanakan kesan riak dari reka bentuk bahan ke dalam aplikasi web. Dan kemudian saya sedar saya tidak tahu bagaimana ia dilaksanakan. Ini membawa saya ke dalam perjalanan untuk mengkaji pelaksanaan yang sedia ada, dan juga menghasilkan teknik baru yang mungkin berguna kepada anda.

Apakah kesan riak ini?

Tunggu, anda tidak tahu kesan riak daripada Reka Bentuk Bahan Google? Pernahkah anda tinggal di sebuah gua selama berapa tahun?

Kesan riak digunakan apabila anda menekan butang. Ia berfungsi dengan cara yang sama untuk tetikus atau interaksi sentuhan.

Kedudukan yang anda klik atau menyentuh butang dipanggil titik hubungan. Dari situ, riak dihantar bergerak ke luar, kehilangan kelegapan apabila ia semakin besar sehingga ia mengisi keseluruhan butang. Kemudian ia hilang sepenuhnya.

Dinamik kesan riak ini sama dengan riak yang anda dapat apabila anda menyentuh permukaan cecair, atau apabila anda menjatuhkan batu ke dalam tasik.

Rombakan yang anda akan temui di web

Selepas melakukan penyelidikan, saya dapat mencari dua teknik utama yang digunakan untuk melaksanakan kesan riak pada aplikasi web.

Menggunakan :: selepas pseudo-elemen

Dengan menggunakan teknik ini, berikut: selepas elemen pseudo-butang digelar sebagai bulatan separa telus, dan animasi tumbuh dan pudar. Butang kontena perlu mempunyai limpahan: tersembunyi supaya bulatan tidak pernah meluap di luar permukaan butang, dan kedudukan: berbanding dengan memudahkan meletakkan kedudukan bulatan dalam butang. Anda boleh membaca lebih lanjut mengenai teknik ini pada artikel ini oleh Ionuţ Colceriu.

Salah satu perkara hebat tentang teknik ini ialah ia adalah penyelesaian CSS tulen untuk kesan riak. Walau bagaimanapun, kesan riak sentiasa bermula dari pusat butang, bukan titik hubungan. Itu bukan maklum balas yang paling semula jadi.

Ia boleh diperbaiki dengan menggunakan JavaScript untuk menyimpan titik kenalan, dan menggunakannya untuk meletakkan riak. Itulah yang material.io telah dilakukan untuk komponen riak web mereka. Ia menggunakan pembolehubah CSS untuk menyimpan titik hubungan, dan :: selepas pseudo-elemen menggunakan pembolehubah ini untuk kedudukan.

Menggunakan unsur kanak-kanak

Pada dasarnya, teknik ini menggunakan strategi yang sama seperti dahulu. Tetapi bukan elemen pseudo, ia menambahkan unsur span di dalam butang, yang kemudiannya boleh diletakkan melalui JavaScript. Teknik ini diterangkan pada artikel ini oleh Jhey Tompkins.

Pelaksanaan yang paling sederhana menghasilkan rentang untuk setiap klik pada butang, dan menggunakan kedudukan tetikus pada peristiwa klik untuk mengubah posisi rentang. An animasi CSS membuat rentang tumbuh dan pudar sehingga menjadi telus sepenuhnya. Kita boleh memilih untuk membuang span dari DOM apabila selesai animasi, atau tinggalkan di sana di bawah permaidani - tidak ada yang benar-benar akan melihat jarak yang telus di sekitar.

Saya mendapati variasi lain ini, di mana elemen kanak-kanak adalah svg dan bukan rentang, dan svg itu dinyalakan melalui JavaScript. Variasi ini dijelaskan oleh Dennis Gaebel, tetapi pada dasarnya ia sama, dan mungkin membenarkan menggunakan bentuk dan kesan SVG yang kompleks.

Masalah dengan menyerahkan input

Kedua teknik yang diterangkan di atas kelihatan hebat. Tetapi inilah yang berlaku ketika saya cuba menerapkannya pada elemen input dengan type = submit:

Mengapa mereka tidak bekerja?

Elemen input adalah unsur yang diganti. Pendek kata, ini bermakna bahawa terdapat sedikit perkara yang boleh anda lakukan dengan elemen tersebut, berkenaan dengan DOM dan CSS. Khususnya, mereka tidak boleh mempunyai elemen kanak-kanak, dan tidak ada unsur-unsur pseudo. Kini jelas mengapa teknik ini gagal.

Oleh itu, jika anda menggunakan Reka Bentuk Bahan, lebih baik untuk menjauhkan diri dari input [type = submit], dan melekat pada elemen butang. Atau terus baca.

Menambah riak untuk menghantar input

Pada aplikasi web yang sedang saya kerjakan, kami sudah banyak mengemukakan butang. Mengubah semuanya menjadi elemen yang berbeza akan memerlukan banyak kerja, dan risiko yang tinggi untuk memecahkan stylesheets dan logik JavaScript. Jadi saya perlu memikirkan cara menambah riak ke butang penyerahan yang sedia ada.

Menggunakan bekas pembalut

Saya dengan cepat menyedari bahawa saya boleh membungkus butang penyerahan di dalam unsur blok sebaris, dan menggunakan elemen sebaris dalam blok sebagai permukaan riak. Inilah demo cepat:

Walaupun saya suka penyelesaian ini kerana kesederhanaannya, ia masih memerlukan saya untuk mengubah markup di terlalu banyak tempat. Dan saya tahu ia akan menjadi penyelesaian rapuh - pemaju baru akan masuk ke projek itu, dan membuat butang penyerahan tanpa membalutnya dengan betul di permukaan riak. Jadi saya terus mencari penyelesaian lain yang tidak memerlukan perubahan DOM.

Kecerunan radial

Sintaks radial-gradient membolehkan saya mengawal kedua-dua pusat dan saiz kecerunan. Sudah tentu, ia juga membolehkan saya mengawal warna kecerunan itu, termasuk warna separa telus. Dan ia tidak pernah melimpah unsur yang digunakan untuknya. Jadi nampaknya ia sudah melakukan semua yang saya perlukan!

Tidak begitu pantas ... ada satu perkara yang hilang: sifat imej latar belakang tidak dapat dinyalakan. Saya tidak dapat membuat kecerunan berkembang dan pudar menjadi telus menggunakan animasi CSS. Saya berjaya menjadikannya berkembang dengan menghidupkan saiz saiz latar belakang, tetapi itu semua yang boleh saya lakukan.

Saya mencuba beberapa perkara lain, seperti mempunyai lingkaran pudar sebagai imej animasi (menggunakan format apng), dan menggunakannya sebagai imej latar belakang. Tetapi saya tidak dapat mengawal apabila gelung imej bermula dan berakhir.

Akhirnya, penyelesaian dengan JavaScript

Apa yang tidak boleh anda lakukan dalam CSS, anda boleh melakukannya dalam JavaScript. Selepas menghabiskan lebih banyak masa daripada saya bersedia untuk mengakui untuk mendapatkan kesan ini bekerja menggunakan animasi CSS, saya hanya berputus asa dan memutuskan untuk menulis animasi dalam JavaScript.

Saya bermula dengan penyelesaian kecerunan jejari di atas, dan menggunakan window.requestAnimationFrame untuk membuat animasi bendalir kecerunan jejari, berkembang dan pudar. Inilah penyelesaian terakhir saya:

Kesimpulannya

Jadi, mungkin ada kesan riak pada butang penyerahan, hanya dengan CSS saja.

Saya tidak dapat menemukan teknik ini didokumenkan di mana sahaja di web, jadi saya memanggilnya sendiri. Teknik riak Leonardo tidak memerlukan perubahan pada DOM, dan berfungsi untuk sebarang unsur kerana ia tidak bergantung pada unsur-unsur pseudo-unsur atau kanak-kanak. Walau bagaimanapun, ia bukan penyelesaian sempurna.

Pertama, terdapat prestasi. Dengan menghidupkan kecerunan dengan JavaScript, anda kehilangan banyak pengoptimuman penyemak imbas. Tetapi, kerana satu-satunya harta yang ditukar adalah imej latar belakang, saya akan mengesyaki bahawa pelayar tidak perlu reflow, dan hanya memerlukan reapplying styles dan mengecat semula elemen. Dalam amalan, itulah yang berlaku, dan prestasi sangat baik. Pengecualian terhadap kenyataan itu adalah Firefox Mobile, yang untuk sebab tertentu tidak bersaing dengan animasi. (edit: animasi licin pada versi Firefox Mudah Alih moden)

Kedua, teknik menggunakan butang imej latar belakang butang. Sekiranya reka bentuk anda memerlukan butang anda untuk mempunyai imej yang diterapkan pada latar belakangnya, kesan riak akan mengatasi itu. Jika anda benar-benar memerlukan imej itu pada reka bentuk anda, maka JavaScript boleh diubah suai untuk menarik kecerunan jejari di atas imej latar belakang yang sedia ada.

Ketiga, ini nampaknya tidak berfungsi di Internet Explorer. Walau bagaimanapun, saya tidak melihat sebarang sebab mengapa ia tidak seharusnya berfungsi dengan IE10 dan ke atas. Mungkin kerana IE menggunakan sintaks yang berbeza untuk kecerunan radial. Tetapi, siapa yang peduli dengan IE pada hari ini? (edit: kaedah ini berfungsi tanpa sebarang masalah di Internet Explorer 11)