Cara Menggunakan Property will-change pada CSS part-2

Properti will-change memungkinkan Anda untuk memberi tahu browser sebelumnya tentang jenis perubahan apa yang kemungkinan Anda buat pada suatu elemen agar memungkinkan browser untuk mengoptimalkan bagaimana elemen tersebut menangani elemen sebelumnya.

Pengaturan akan-ubah melalui JavaScript memungkinkan kontrol yang lebih baik dan waktu bagi browser untuk mempersiapkan perubahan, dan juga memungkinkan Anda untuk menghapusnya segera setelah acara animasi berakhir – Anda tidak akan dapat melakukannya jika akan -penggantian dinyatakan dalam CSS sebaliknya. Menggunakan JavaScript, Anda dapat mendeklarasikan perubahan Anda ke browser, dan kemudian menghapus perubahan akan setelah perubahan dilakukan, dengan mendengarkan ketika perubahan ini selesai.

Misalnya, Anda bisa mendengarkan ketika elemen (atau leluhurnya) melayang-layang, dan kemudian mengatur perubahan akan pada mouseenter. Jika elemen Anda sedang dianimasikan, Anda dapat mendengarkan ketika animasi telah berakhir menggunakan DOM event animationEnd, dan kemudian menghapus perubahan-perubahan setelah animationEnd diaktifkan.

// Rough generic example
// Get the element that is going to be animated on click, for example
var el = document.getElementById('element');

// Set will-change when the element is hovered
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
	// The optimizable properties that are going to change
	// in the animation's keyframes block
	this.style.willChange = 'transform, opacity';
}

function removeHint() {
	this.style.willChange = 'auto';
}

Jika Anda ingin mengatur perubahan di lembar gaya untuk mengoptimalkan elemen yang mungkin berubah saat melayang, maka untuk memberi tahu browser agar mengoptimalkan perubahan yang Anda harapkan terjadi saat melayang, Anda dapat melakukan hal seperti ini :

.el:hover {
    will-change: transform;
    transform: rotate()...;
}

Ini khususnya tidak salah, tetapi juga tidak terlalu berguna. Anda perlu menyatakan niat Anda ke browser beberapa saat sebelum perubahan benar-benar terjadi, bukan ketika itu terjadi, untuk memberikan waktu untuk mempersiapkan perubahan dan melakukan optimasi yang diperlukan. Jadi, dalam skenario seperti ini, Anda dapat melakukan ini:

.el {
    will-change: transform;
}

.el:hover {
    transform: rotate()...;
}

Atau, Anda dapat mengatur akan-berubah ketika wadah elemen melayang-layang, karena butuh waktu untuk acara melayang untuk mencapai elemen itu sendiri, dan browser kemudian dapat menggunakan waktu itu untuk mempersiapkan perubahan pada elemen itu sendiri:

.container:hover .el {
    will-change: transform;
}

.el:hover {
    transform: rotate()...;
}

Singkatnya, ingatlah untuk menggunakan perubahan akan dengan hati-hati, jangan berlebihan, dan hanya mengaturnya hanya ketika Anda tahu elemen akan berubah, dan ingat untuk menghapusnya setelah perubahan dilakukan.

Trivia & Catatan

Properti will-change pertama kali bernama will-animate, sebelum namanya diubah menjadi will-change.

Paul Lewis menciptakan alat yang memungkinkan pengembang untuk lebih mudah memahami konsekuensi dari mengubah gaya mereka. Menurut konsekuensi kinerja dari mengubah properti tertentu, Anda mungkin atau mungkin tidak ingin atau perlu mengatur akan berubah untuk memberi petunjuk kepada browser tentang perubahan nilai properti tersebut. Alat Lewis disebut

Official Syntax

will-change: auto

dimana:

<animateable-feature> = scroll-position | contents | <custom-ident>

Dan tagar (#) menunjukkan bahwa Anda dapat menentukan beberapa fitur yang dapat dianimasikan. Beberapa nilai dipisahkan dengan koma.