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

Bramus

Trong CSS Grid, các 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 lưới tương ứng. Việc hỗ trợ nội suy cho các thuộc tính này cho phép bố cục lưới chuyển đổi liền mạch giữa các trạng thái, thay vì chụp nhanh ở điểm giữa của ảnh động hoặc chuyển đổi.

Nội suy giá trị trong CSS

Trong CSS, bạn có thể chuyển đổi các thuộc tính từ giá trị này sang giá trị khác một cách liền mạch 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 mục tiêu và sử dụng thông tin đó để chuyển đổi suôn sẻ sang giá trị mới.

Ví dụ:

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

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

Tạo ảnh động cho grid-template-columns và grid-template-rows

Bố cục lưới cũng 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 chuyển đổi.

Trong bản minh hoạ sau, một lưới hiển thị một số hình đại diện. Để tiết kiệm không gian, các hình đại diện được sắp 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 grid-template-columns. Khi di chuột, mỗi cột sẽ có 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 đặt đúng vị trí, lưới sẽ nội suy liền mạch giữa các giá trị.

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