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ộ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.
Hỗ trợ trình duyệt
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ụ kết xuất 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
sang1
? Đó là phép nội suy số. - Chuyển đổi
background-color
từwhite
sangblack
? 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 các ảnh động thay đổi giá trị grid-template-columns
hoặc grid-template-rows
.