В CSS Grid свойства grid-template-columns и grid-template-rows позволяют вам определять имена строк и отслеживать размеры столбцов и строк сетки соответственно. Поддержка интерполяции для этих свойств позволяет макетам сетки плавно переходить между состояниями вместо привязки в середине анимации или перехода.
Поддержка браузера
- 107
- 107
- 66
- 16
Интерполяция значений в 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
Благодаря нашим участникам из Microsoft, Chrome, начиная с версии 107, может интерполировать значения 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 .