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.
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
sang1
? Đó là phép nội suy số. - Bạn muốn chuyển đổi
background-color
từwhite
sangblack
? 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.
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