Cara Menggunakan Variabel CSS untuk Animasi

() translation by (you can also view the original English article)

Saat kita menyebut CSS dalam diskusi, kita sering menyebutnya sebagai dumbed down language. Declarative language, yang tidak memiliki logika dan pencerahan; namun pada kenyataannya itu tidaklah benar. Selama beberapa tahun, para pengembang telah menginginkan variabel dalam CSS standar, dimanjakan oleh preprocessor seperti LESS dan Sass untuk waktu yang sangat lama. Bukan variabel CSS yang merupakan opsi nyata dan terlihat bagi pengembang, mereka juga bisa digunakan dalam skenario animasi. Masih skeptis? Terus ikuti untuk mengetahui lebhi banyak!

Variabel Dasar

Variabel CSS adalah nilai tersimpan yang ditujukan untuk digunakan kembali melalui stylesheet. Mereka bisa diakses menggunakan fungsi kostum var() dan mengaturnya menggunakan notasi properti kostum.

:root {
  --main-color: goldenrod;
}

div {
  background-color: var(--main-color);
}

Variabel didefinikan dalam :root bersifat global, meskipun variabel yang didefinisikan dalam sebuah selector menjadi spesifik pada selector tersebut.

1	div {
2	--module-color: goldenrod;
3	background-color: var(--module-color);
4	}

Pada contoh di atas, semua div akan menerima variabelnya. Tapi kita ingin menjadi lebih spesifik dengan menamainya menggunakan metode targeting seperti class atau id.

Fungsi var() juga bisa menerima nilai fallback juga.

1	.nav {
2	background: var(--navbg, blue);
3	}

Ini bisa jadi berguna di situasi saat sebuah variabel belum didefinisikan atau saat bekerja dengan elemen kostum dan Shadow DOM.

Variabel CSS belum siap untuk pertunjukkan utama, tapi pandang kedepannya sangat cerah dengan banyak browser yang sudah mengimplementasikan spec-nya. Ini hanya masalah waktu hingga mereka bisa digunakan tanpa khawatir. Dan saat itu akan segera tiba.

Variabel untuk Animasi

Ada banyak opsi untuk mengombinasikan variabel CSS dengan animasi. Pikirkan mengeneai konteks seperti visualisasi audio, JavaScript event-driven scenarios, dan bahkan CSS driven events seperti hover, focus, dan target. Secara teori, sebuah Apple Watch bisa dihubungkan ke API sambil menggunakan animasi berbasis variabel CSS dari jantung yang berdetak. Lalu kita memiliki akselometer, device tilt APIs dan bahkan gamepad APIs, tapi kenapa kita harus mempertimbangkan menganimasikannya dengan Variabel CSS? Berikut adalah beberapa alasannya.

Mudah didebug
Tidak ada manipulasi DOM berlebihan
DOM node independent
Penemaan
Bekerja dengan SVG

Operasi di CSS adalah bagian kunci dari puzzle animasi. fungsi CSS seperti calc bisa menerima sebuah nilai di runtime dan mengeksekusi operator seperti perkalian, pembagian, penambahan, pengurangan, memutasi ke sebuah nilai baru. Ini membuat variabel CSS jadi dinamis.

Variabel CSS di JavaScript

Sekarang ktia tahu rupa dari variabel CSS dan apa yang bisa dia lakukan. Sekarang adalah saatnya untuk memahami cara JavaScript cocok dengan itu semua.

1	document.documentElement.style.getPropertyValue('--bgcolor');
2	document.documentElement.style.setProperty('--bgcolor', 'red');
3	document.documentElement.style.removeProperty('--bgcolor');

Metode-metode di atas digunakan untuk mengatur, mendapatkan dan menghapus nilai properti. (background-color, font-size dan lainnya), tapi mereka juga bisa digunakan untuk variabel CSS juga. Opsi ini akan mengatur sebuah nilai baru untuk properti yang didefinisikan secara global. Jika tidak akan dikenali sebagai :root di CSS

Mereka juga adalah kunci rahasia untuk animasi dengan variabel CSS karena meotde JS kita bisa mengambil, mengatur, atau menghapus sebuah variabel di run-time secara dinamis!

var element = document.querySelector('div');

element.style.getPropertyValue('--bgcolor');
element.style.setProperty('--bgcolor', 'red');
element.style.removeProperty('--bgcolor');

Kamu juga bisa mengatur sebuah nilai baru untuk elemen tertentu yang diinginkan. Pada contoh di intipan di atas kita memanipulasi sebuah variabel yang terlampir dalam selector div ketimbang melampirkannya secara global.

Demo dalam Keliarannya

Ada banyak sekali pengembang luar biasa dan berbakat yang membuat dan bereksperimen dengan konsep dari reaktif dan theme-based animations menggunakan variabel CSS. Berikut hanya beberapa untuk diselami.

Sunset/Sunrise

Oleh David Khourshid.

Contoh ini menunjukkan kemampuan dari animasi variabel CSS digunakan dalam bentuk theme-based. Dia secara general akan memiliki kode dua kali lebih banyak untuk dieksekusi di demo ini tanpa variabel CSS dan lebih banyak waktu jika kamu ingin memiliki dua tema.

CSS Variables Animation

Oleh GRAY GHOST.

Berikut adalah contoh lain menggunakan mouse event d JavaScript yang mengatur lokasi dari sebuah lingkaran.

Tiap kali kamu menggerakkan mouse, JavaScript akan memperbaharui variabel yang terdeklarasi, mengizinkan lingkarannya untuk bergerak pada posisi relatif terhadap kursor-mu.

Alex the CSS Husky

Oleh David Khourshid.

Di sini prinsip yang sama didemonstrasikan di atas, tapi digunakan dalam konteks lain.

Perhatikan apa yang terjadi saat kamu menggerakkan mouse, sangat keren bukan?

Animation with CSS Variables

Oleh Wes Bos.

Bagaimana mengenai cara lainnya untuk memperbaharui nilai dari variabel? Mari perhatikan demo berikut oleh Wes Wis yang menggunakan sliders untuk memperbaharui posisi dari sebuah gambar.

Gerakkan slider sesukamu. Perhatikan hal keren yang muncul. Sederhana, namun terasa magis dan itu semua dilakukan dengan memperharui nilai dari posisi transform tiap kali slider diubah. Maaaannnniiiiiss!

Single Div Accordion (Dianimasikan dengan CSS Variables)

Oleh Dan Wilson.

Bagaimana dengan sesuatu yang sedikit berbeda untuk musisi di luar sana? ek hip accordion oleh Dan Wilson.

Whoa! Lihatlah tuts-nya bergerak! Ini mungkin terlihat sedikit mengintimidasi, tapi apda dasarnya itu hanyalah JavaScript yang memperbaharui variabel CSS. Tidak lebih maupun kurang.

CSS Variables + Transform = Individual Properties (dengan Inputs)

Oleh Dan Wilson

Pada demo ini, menggunakan rentang input untuk memodifikasi tiap properti trasnform dan saksikan betapa halusnya mereka bahkan jika kamu mengganti sebuah property mid transition.

Efek Samping dari Variabel CSS

Karena variabel CSS adalajh properti warisan, mereka bisa menyebabkan style recalculation dari anak yang berdampah buruk pada peforma dari prosesnya. Ini akan menjadi sesuatu yang perlu kamu ukur, untuk membuat tebakan tergantung kotenksmu.

Huh, tampaknya memodifikasi variabel CSS sebuah elemen memicu style recalculation untuk semua anak dari. Ouch pic.twitter.com/jvpDT5UB2h
— Joni Korpi (@jonikorpi) May 18, 2017

Ini adalah sebuah demo yang Shaw kirim di grup Slack Animation at Work yang digunakan untuk menguji: CSS Variables Recalc Style Performance Test

Selama tes (Chrome 58. Mac 10.12) ditemukan bahwa saat tombol Set CSS Var dipicu hingga browser melukis latar belakang. Terdapat 52.84ms waktu recalc dan 51.8 waktu rendering. Mengganti gears ke uji coba CSS Property, hasil yang berbeda didapatkan. Dari saat tombol Set CSS Property dipicu hinggal penggambaran latar belakang. Kurang lebih ada 0.43ms recalc dan 0.9ms rendering.

Jika kamu mengganti background dengan color kamu akan mendapatkan perhitungan yang sama karena currentColor mungkin ada atau tidak ada di anak-nya (Teriak ke David Khourshid). Properti apapun yang bisa diwariskan akan selalu menimbulkan style recalc pada semua anaknya. Properti background-color di dapat diwariskan, dari situlah muncul perbedaan dengan variabel CSS yang selalu bisa diturunkan. Biasanya properti CSS yang secara bawaan inherit yang akan menyebabkan kasus recalc style yang besar. Penting juga untuk mengingat bahwa merubah variabel CSS secara bekerlanjutan bisa menurunkan peforma. Contoh bagus untuk dihindari adalah menganimasikan variabel CSS pada tingkat yang paling spesifik (atau tingkat paling dalam), untuk mencegah banyak anaknya yang terpengaruh. Kamu bisa membaca lebih lanjut mengenai pengurangan lingkup dan kompleksitas dari style calculations melalui laman Google's Web Fundamentals.

Kesimpulan

Saya menyarangkan kamu untuk terjun dan mencoba demo-nya. Lalu buatlah perubahan/kesimpulan.atau uji cobamu sendiri dan bagikan hasilnya di kolom komentar. Hal yang bisa ktia ambil adalah bahwa variabel CSS menawarkan fleksibiltas yang besar, namun masih adalah masalah peforma dalam pengaturan variabel CSS pada induk yang memiliki banyak anak.

Terima kasih terkhusus pada gang di channel Slack Animation At Work untuk uji coba, umpan balik, dan diskusi (David Khourshid, Joni Korpi, Dan Wilson and Shaw).

Sumber

Properti Kostum CSS untuk Cascading Variables Module Tingkat 1 di W3C
Membuat Properti Kostum (Variabel CSS) Lebih Dinamis di CSS Tricks
Individualisasi Properti CSS dengan Variabel CSS oleh Dan Wilson
Slide Animasi Variabel CSS Reaktif oleh David Khourshid
Animasi Reaktif dengan Variabel CSS - JSConf Iceland 2016 David Khourshid
Mendapat variabel dari inline style oleh Lea Verou