GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 26/08/2019 | 00:00 GMT+7

CSS sẽ thay đổi Thuộc tính: Khi nào và Không sử dụng Nó

Thuộc tính CSS will-change thường bị hiểu nhầm hoặc không được sử dụng đúng cách, trong bài đăng ngắn này, tôi sẽ làm sáng tỏ thuộc tính để bạn có thể làm cho hoạt ảnh và chuyển tiếp CSS của bạn hoạt động hiệu quả nhất có thể.

Thay đổi ý chí là gì?

Tóm lại, thuộc tính will-change là một cách để thông báo trước cho trình duyệt biết những thuộc tính và phần tử nào có khả năng bị thao túng. Sử dụng thông tin này, trình duyệt có thể thực hiện các tối ưu hóa trước khi cần thiết, điều này có thể mang lại trải nghiệm mượt mà hơn.

Một ví dụ về điều này sẽ là nếu ta đang áp dụng một transform trên một phần tử, ta có thể thông báo cho trình duyệt về điều này như sau:

will-change: transform;

Bạn cũng có thể khai báo nhiều giá trị như vậy:

will-change: transform, opacity;

Giá trị sẽ thay đổi

will-change có thể nhận bốn giá trị có thể có:

  • tự động - trình duyệt sẽ áp dụng các tối ưu hóa
  • cuộn-vị trí - cho biết rằng tác giả dự kiến sẽ chuyển động hoặc thay đổi vị trí cuộn của phần tử trong tương lai gần
  • nội dung - cho biết rằng tác giả dự kiến sẽ tạo hiệu ứng hoặc thay đổi điều gì đó về nội dung của phần tử trong tương lai gần.
  • custom-indent - cho biết rằng tác giả dự kiến sẽ tạo hoạt ảnh hoặc thay đổi thuộc tính với tên đã cho trên phần tử trong tương lai gần.

Giá trị mà ta sẽ tập trung vào là custom-indent tức là transform , opacity , v.v.

Khi nào sử dụng will-change?

Như đã nêu trong MDN của Mozilla , will-change ý chí nên được sử dụng như một phương sách cuối cùng.

Nếu ta lạm dụng việc sử dụng will-change , ta sẽ bị ảnh hưởng về hiệu suất, điều này hoàn toàn trái ngược với những gì ta muốn. Nếu hoạt ảnh / chuyển tiếp của bạn mượt mà và sắc nét thì không cần sử dụng will-change . Trình duyệt đã thực hiện tối ưu hóa mà không sử dụng tùy chọn will-change .

Đừng làm điều này!

Một sai lầm phổ biến mà mọi người thường mắc phải khi sử dụng will-change là:

.my-element:hover {
  will-change: opacity;
  transition: opacity .25s ease-in-out;
}

Điều này gây hại nhiều hơn lợi, will-change ý chí là thời gian trong tương lai, vì vậy nó không nên được áp dụng khi hoạt ảnh đang diễn ra.

Cách sử dụng tốt hơn will-change ở đây là đặt will-change vào phần tử root của my-element như vậy:

.parent-element:hover {
  will-change: opacity;
}

.my-element:hover {
  transition: opacity .25s ease-in-out;
}

Điều này cho phép trình duyệt biết trước để tối ưu hóa cho thay đổi này. Hãy nhớ sử dụng điều này như một phương sách cuối cùng nếu hoạt ảnh của bạn không ổn định hoặc nhấp nháy.

Xóa ý chí thay đổi

Mozilla khuyến nghị loại bỏ will-change sau khi phần tử thay đổi xong. Đây là lý do tại sao bạn cũng nên đặt will-change qua JavaScript để bạn có thể xóa nó. Nếu will-change ý chí được đặt trong biểu định kiểu CSS, nó không thể bị xóa.

Code-khôn ngoan là điều này khá đơn giản và trông như thế này:

const el = document.querySelector('.parent-element')
el.addEventListener('mouseenter', addWillChange)
el.addEventListener('animationend', removeChange)

const addWillChange = () => {
  this.style.willChange = 'opacity'
}

const removeChange = () => {
  this.style.willChange = 'auto'
}

Đoạn mã trên rất đơn giản, ta đang thêm will-change ý chí của bạn vào parent-element khi nó được di chuột qua sau đó khi sự kiện animationend được kích hoạt, ta xóa will-change .

Đặt will-change trong biểu định kiểu có thể có ý nghĩa trong một số trường hợp. Một trường hợp như thế này sẽ là một phần tử có khả năng được tương tác nhiều lần, đây có thể là một cái gì đó giống như hiệu ứng gợn sóng trên một nút hoặc một thanh bên trượt ra. Nói chung, chỉ nên có một số thuộc tính will-change trong biểu định kiểu, phần còn lại lý tưởng là nên được đặt thông qua JavaScript.

Kết luận

Đây là một đoạn giới thiệu ngắn về will-change , và nếu bạn đang muốn tìm hiểu sâu hơn, tôi thực sự khuyên bạn nên xem bài viết tuyệt vời của Sara Soueidan về chủ đề này.

Cảm ơn vì đã đọc!

Tags:

Các tin liên quan

Trình xử lý nhấp chuột chỉ dành cho CSS sử dụng: target Pseudo-Class (Không có JavaScript)
2019-08-22
Giới thiệu về Tailwind CSS
2019-08-13
Hiểu CSS Float
2019-06-07
Giới thiệu về Bulma CSS với React
2018-10-12
Media query CSS: Tham khảo và hướng dẫn nhanh
2018-06-07
Mẹo CSS: Bóng đổ nhiều màu & cắt bỏ
2018-04-02
Cách hiện đại để xử lý CSS trong React
2018-02-22
CSS-in-JS Roundup: Tạo kiểu cho các thành phần React
2017-08-21
Đặt lại CSS tối thiểu
2017-06-21
Hàm CSS color-mod
2017-01-12