Анимация CSS Grid. Как сделать + примеры

MasterNik / 23 июня 2023 г. / 256 / Время чтения 6 мин.

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

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

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

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

Я знаю, о чем вы думаете: “Анимировать свойство 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 свойство, чтобы левый столбец занимал больше места при наведении курсора мыши.

Само по себе это не так уж интересно, хотя здорово, что анимация и переходы теперь поддерживаются в CSS Grid. Что еще интереснее, так это то, что мы можем использовать относительно новый :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, которые могут выглядеть чище, а могут и не выглядеть, в зависимости от ваших личных предпочтений (или вы все равно можете использовать переменные CSS в своем проекте):

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

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

Мне нравится, что CSS-сетки теперь можно анимировать, но тот факт, что мы можем создать этот конкретный пример всего из девяти строк CSS, еще более поразителен.

Вот еще один пример — похожая концепция, но с содержимым (нажмите на значок навигации):

Пример 2: Разворачивание панелей

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

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

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

Этот пример анимированным образом “добавляет” столбец в сетку. Однако — как вы уже догадались — в этом сценарии тоже есть подводный камень. Требование заключается в том, что столбец “new” не должен быть скрыт (т. Е. установлен в display: none значение), а CSS-сетка должна подтверждать его существование, задавая его ширину в 0fr.

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

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

Напишите в комментfриях, если вдруг в каком-то браузере анимация сетки всё ещё не работает.

Удачных вам проектов!