В CSS Grid свойства grid-template-columns
и grid-template-rows
позволяют определять имена строк и отслеживать размеры столбцов и строк сетки соответственно. Поддержка интерполяции для этих свойств позволяет макетам сетки плавно переходить между состояниями вместо привязки в середине анимации или перехода.
Поддержка браузера
Интерполяция значений в CSS
В CSS вы можете плавно переходить свойства от одного значения к другому, используя свойство transition
.
#target {
opacity: 0.5;
transition: opacity ease-in-out 0.25s;
}
#target:hover {
opacity: 1;
}
Механизм рендеринга автоматически определит тип значения целевого свойства и будет использовать эту информацию для плавного перехода к новому значению.
Например:
- Переход
opacity
с0
на1
? Это числовая интерполяция. - Переход
background-color
сwhite
наblack
? Переход между исходным и целевым цветами. -
width
перехода? Интерполируйте численно, при необходимости преобразуя единицы измерения.
То же самое относится и к CSS-анимации, где браузер выполняет интерполяцию значений между ключевыми кадрами.
Анимация grid-template-columns
и grid-template-rows
Макеты сетки также могут плавно переходить между состояниями вместо привязки в середине анимации или перехода.
В следующей демонстрации в сетке показаны несколько аватаров. Чтобы сэкономить место, аватары располагаются друг над другом, ограничивая ширину каждого столбца с помощью grid-template-columns
. При наведении курсора мыши каждому столбцу выделяется больше места.
.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);
}
При наличии свойства transition
сетка плавно интерполирует значения.
Эффект также применяется к анимациям, которые изменяют значения grid-template-columns
или grid-template-rows
.