Bố cục lưới ảnh động CSS

Trong Lưới CSS, thuộc tính grid-template-columns và grid-template-rows cho phép bạn xác định tên dòng và theo dõi kích thước của các cột và hàng trong lưới tương ứng. Việc hỗ trợ loại nội suy cho các thuộc tính này cho phép bố cục lưới chuyển đổi suôn sẻ giữa các trạng thái, thay vì chụp nhanh ở điểm giữa của ảnh động hoặc quá trình chuyển đổi.

Bramus

Kỷ niệm: Tính năng web này hiện đã có trên cả ba công cụ trình duyệt!

Hỗ trợ trình duyệt

• 107
• 107
• 66
• 16

Loại nội suy giá trị trong CSS

Trong CSS, bạn có thể chuyển đổi dễ dàng các thuộc tính từ giá trị này sang giá trị khác bằng cách sử dụng thuộc tính transition.

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

Công cụ hiển thị sẽ tự động phát hiện loại giá trị của thuộc tính được nhắm đến và sử dụng thông tin đó để chuyển đổi sang giá trị mới một cách suôn sẻ.

Ví dụ:

• Bạn muốn chuyển đổi opacity từ 0 sang 1? Đó là phép nội suy số.
• Bạn muốn chuyển đổi background-color từ white sang black? Làm mờ giữa màu nguồn và màu đích.
• Đang chuyển đổi width? Nội suy bằng số, chuyển đổi các đơn vị trong quá trình chuyển đổi nếu cần.

Điều này cũng áp dụng cho ảnh động CSS, trong đó trình duyệt sẽ thực hiện nội suy giá trị giữa các khung hình chính.

Lưu ý: Khi sử dụng Thuộc tính tuỳ chỉnh, hãy sử dụng @property để cho biết đó thuộc loại thuộc tính nào. Bằng cách đó, trình duyệt sẽ biết cách chuyển đổi từ giá trị này sang giá trị khác.

Nội suy grid-template-columns và grid-template-rows

Nhờ những cộng tác viên của chúng tôi tại Microsoft, Chrome (kể từ phiên bản 107) có thể nội suy các giá trị grid-template-columns và grid-template-rows.

Bố cục lưới có thể chuyển đổi suôn sẻ giữa các trạng thái, thay vì chụp nhanh ở điểm giữa của ảnh động hoặc hiệu ứng chuyển đổi.

Trong bản minh hoạ bên dưới một lưới cho thấy một số hình đại diện. Để tiết kiệm không gian, hình đại diện được xếp chồng lên nhau bằng cách giới hạn chiều rộng của mỗi cột bằng cách sử dụng grid-template-columns. Khi di chuột, mỗi cột được cấp thêm không gian.

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

Khi thuộc tính transition có sẵn, lưới này sẽ nội suy dễ dàng giữa các giá trị.

Hiệu ứng này cũng áp dụng cho ảnh động thay đổi các giá trị grid-template-columns hoặc grid-template-rows.

Một phần của Loạt chương trình tương tác mới