Я рад пролить свет на тот факт, что свойства CSS grid-template-rows и grid-template-columns теперь можно анимировать во всех основных веб-браузерах! Что ж, CSS Grid уже давно технически поддерживает анимацию, поскольку она встроена прямо в спецификацию CSS Grid Layout Module Level 1.
Но анимация этих свойств сетки только недавно стала поддерживаться всеми тремя основными браузерами. Давайте посмотрим на несколько примеров, чтобы дать волю творчеству?
Пример 1: Расширение боковой панели
Прежде всего, это то, о чем мы говорим:
Простая двухколоночная сетка. Раньше вы могли не создавать это с помощью CSS Grid, потому что анимация и переходы не поддерживались, но что, если вы хотите, чтобы левый столбец — возможно, навигация по боковой панели — расширялся при наведении курсора мыши? Что ж, теперь это возможно.
Я знаю, о чем вы думаете: “Анимация свойства CSS? Проще простого, я занимаюсь этим уже много лет! ” Я тоже. Однако, экспериментируя с конкретным вариантом использования, я столкнулся с интересной проблемой.
Итак, мы хотим перенести саму сетку (в частности, grid-template-columns, которая установлена в классе .grid в примере). Но левый столбец (.left) - это селектор, для которого требуется псевдокласс :hover . Хотя JavaScript может легко решить эту головоломку — спасибо, но нет, — мы можем сделать это только с помощью CSS.
Давайте пройдемся по всему этому вопросу, начиная с HTML. Довольно стандартная штука на самом деле… сетка с двумя столбцами.
Отложив в сторону косметический CSS, вам сначала нужно установить display: grid в родительском контейнере (.grid).
Затем мы можем определить и изменить размер двух столбцов, используя свойство grid-template-columns. Мы сделаем левый столбец очень узким, а позже увеличим его ширину при наведении. Правая колонка занимает оставшееся место благодаря ключевому слову auto.
Мы знаем, что собираемся анимировать эту штуку, так что давайте добавим туда transition, пока мы это делаем, чтобы переход между состояниями был плавным и заметным.
Вот и все для .grid! Осталось только применить состояние наведения. В частности, мы собираемся переопределить свойство grid-template-columns, чтобы левая колонка занимала больше места при наведении.
Само по себе это не так уж интересно, хотя здорово, что анимация и переходы теперь поддерживаются в CSS Grid. Еще интереснее то, что мы можем использовать относительно новый псевдокласс :has() для стилизации родительского контейнера (.grid), когда дочерний (.left) находится под курсором.
На простом языке это означает: «Сделайте что-нибудь с контейнером .grid, если он содержит элемент с именем .left внутри него, который находится в состоянии наведения». Вот почему :has() часто называют «родительским» селектором. Наконец-то мы можем выбрать родителя на основе содержащихся в нем дочерних элементов — JavaScript не требуется!
Итак, давайте увеличим ширину столбца .left до 30% при наведении. Столбец .right продолжит занимать все оставшееся место:
Мы также могли бы использовать переменные CSS, которые могут выглядеть или не выглядеть чище в зависимости от ваших личных предпочтений (или вы все равно можете использовать переменные CSS в своем проекте):
Мне нравится, что сетки CSS теперь можно анимировать, но тот факт, что мы можем построить этот конкретный пример всего с девятью строками CSS, еще более поразителен.
Вот еще один пример от Olivia Ng — аналогичная концепция, но с содержанием (нажмите на значок навигации):
Пример 2: Расширение панелей
В этом примере выполняется переход контейнера сетки (ширины столбцов), а также отдельных столбцов (цвета их фона). Это идеально подходит для предоставления большего количества контента при наведении курсора.
Стоит помнить, что функция repeat() иногда производит глючные переходы, поэтому я устанавливаю ширину каждого столбца отдельно (т. е. grid-template-columns: 1fr 1fr 1fr).
Пример 3: Добавление строк и столбцов
Этот пример анимированно «добавляет» столбец в сетку. Однако, как вы уже догадались, у этого сценария есть и ловушка. Требование состоит в том, что «новый» столбец не должен быть скрыт (т. е. установлен для display: none), а CSS Grid должен подтверждать его существование, устанавливая его ширину на 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. Это далеко не так сложно, как кажется!
Та же концепция, но с большим количеством пиццы Мишель Баркер. Может сделать хороший спиннер загрузки?
В завершение с ноткой ностальгии (здесь показан мой возраст) не очень грубая анимированная сетка CSS от Эндрю Гарварда. Опять же — та же концепция — просто вы не можете видеть другие элементы сетки. Но не волнуйтесь, они есть.
Перевод статьи "Animating CSS Grid (How To + Examples)".