Анимация грида в CSS

Я рад пролить свет на тот факт, что CSS grid-template-rows и grid-template-columns теперь можно анимировать во всех основных веб-браузерах! Что ж, CSS Grid уже давно технически поддерживает анимацию, ведь она встроена прямо в спецификацию CSS Grid Layout Module Level 1.

Но анимация этих свойств грида только недавно стала поддерживаться всеми тремя основными браузерами. Давайте посмотрим на несколько примеров, чтобы дать волю творчеству.

Пример 1: расширение боковой панели

Прежде всего, вот то, о чём мы говорим:

Простой грид в две колонки. Раньше нельзя было создавать её с помощью грида, потому что анимация и переходы не поддерживались, но что, если вы хотите, чтобы левый столбец — возможно, боковая панель навигации — расширялся при наведении? Что ж, теперь это возможно.

Я знаю, о чём вы подумали: «Анимация свойства CSS? Полегче, я этим занимаюсь уже много лет!» Я тоже. Однако, экспериментируя с конкретным вариантом, я столкнулся с интересной загвоздкой.

Итак, мы хотим изменить сам грид (в частности, grid-template-columns, которая в примере установлена в классе .grid). Но левый столбец (.left) — это селектор, для которого требуется псевдокласс :hover. Хотя JavaScript может легко решить эту головоломку — спасибо, но нет, — решить её можно при помощи одного лишь CSS.

Давайте пройдёмся по всему, начиная с HTML. На самом деле довольно стандартный материал… грид с двумя столбцами.

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

Отложив в сторону косметический CSS, сначала нужно установить display: grid в родительском контейнере (.grid).

.grid {
  display: grid;
}

Затем можно определить и изменить размер двух столбцов через grid-template-columns. Мы сделаем левый столбец очень узким, а позже увеличим его ширину при наведении. Правая колонка занимает оставшееся место благодаря ключевому слову auto.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

Мы собираемся анимировать эту штуку, поэтому давайте добавим transition, чтобы переход между состояниями стал плавным и заметным.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* Change as needed */
}

Это всё с .grid! Осталось применить состояние наведения. В частности, мы собираемся переопределить свойство grid-template-columns, чтобы левая колонка расширялась при наведении.

Само по себе это не так уж интересно, хотя здорово, что анимация и переходы теперь поддерживаются в гридах. Ещё интереснее, что мы можем использовать относительно новый псевдокласс :has(), чтобы стилизовать родительский контейнер grid, когда указатель наведён на дочерний элемент (.left).

.grid:has(.left:hover) {
  /* Hover styles */
}

На простом русском языке это означает: «Сделайте что-нибудь с контейнером .grid, если он содержит внутри элемент с именем .left, который находится в состоянии наведения». Вот почему :has() часто называется «родительским» селектором. Наконец-то можно выбрать родителя по дочерним элементам в нём — и JavaScript не нужен!

Увеличим ширину столбца .left до 30% при наведении. Столбец .right по-прежнему будет занимать всё оставшееся место:

.grid {
  display: grid;
  transition: 300ms;
  grid-template-columns: 48px auto;
}

.grid:has(.left:hover) {
  grid-template-columns: 30% auto;
}

Можно было воспользоваться переменными CSS:

.grid {
  display: grid;
  transition: 300ms;
  grid-template-columns: var(--left, 48px) auto;
}

.grid:has(.left:hover) {
  --left: 30%;
}

Мне нравится, что гриды теперь можно анимировать, но ещё больше поражает, что сделать этот пример можно всего в девять строк. Вот ещё один пример от Olivia Ng — принцип тот же, но с осодержимым (нажмите на иконку в левом верхнем углу):

Пример 2: расширяющиеся панели

В этом примере выполняется переход контейнера грида (ширины столбцов), а также отдельных столбцов (цвета их фона). Идеально, чтобы при наведении курсора показать больше контента.

Стоит запомнить, что repeat() иногда выдаёт глючные переходы, поэтому я устанавливаю ширину каждого столбца отдельно (например, grid-template-columns: 1fr 1fr 1fr).

Пример 3: добавление столбцов рядов

Этот пример анимированно «добавляет» в грид столбец. Однако, как вы уже догадались, здесь есть и ловушка. Требуется, чтобы «новый» столбец не был скрыт (т. е. установлен на display: none), а грид должен подтверждать его существование шириной 0fr.

Итак, для грида с тремя столбцами — grid-template-columns: 1fr 1fr 0fr (да, единица измерения должна быть объявлена, даже если значение равно 0!) переходит в grid-template-columns: 1fr 1fr 1fr правильно, но grid-template-columns: 1fr 1fr — нет. Это действительно имеет смысл, ведь мы знаем, как работают переходы.

Вот ещё один пример от Мишель Баркер — принцип тот же, но есть ещё колонка и пафоса намного больше. Обязательно запустите его в полноэкранном режиме, потому что он отзывчивый (никаких хитростей, просто хороший дизайн!).

Ещё несколько примеров

Этот «Анимированный Мондриан» является оригинальным доказательством концепции анимированных сеток CSS от Chrome DevRel. Grid-row и grid-column используют ключевое слово span для создания макета, который вы видите перед собой, а затем grid-template-row иgrid-template-column.`, анимированные CSS. Это далеко не так сложно, как кажется!

Принцип тот же, но пиццы больше. Может, сделать хороший спиннер загрузки?

Анимированный грид от Эндрю Гарварда. Опять же принцип тот же, просто нельзя увидеть другие элементы грида. Не волнуйтесь, они есть.

Больше практики и реальный опыт в IT — на наших курсах:

• Профессия Frontend-разработчик (9 месяцев)
• Профессия Fullstack-разработчик на Python (16 месяцев)