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

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

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

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

Содержание

Пример 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риях, если вдруг в каком-то браузере анимация сетки всё ещё не работает.

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

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

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

Варианты оформления поля Поиска по сайту на CSS
Варианты оформления поля Поиска по сайту на CSS
Обычное поле Поиска по сайту можно оформить более оригинально, чем просто инпут с лупой. Например, благодаря анимационным эффектам на CSS3 поле для ввода поисковой фразы можно скрыть, чтобы освободить место для другого контента...

CSS анимация обводки блоков
CSS анимация обводки блоков
Интересные эффекты для границ блоков контента с анимацией, которые вам могут пригодиться при оформлении страниц сайта.

Как создать пользовательский ползунок диапазона с помощью CSS
Как создать пользовательский ползунок диапазона с помощью CSS
Ползунки диапазона (<input type="range">) позволяют пользователям выбирать значение в пределах заданного диапазона, предоставляя альтернативные типы ввода, такие как <input type="number">.

Анимированные ссылки
Анимированные ссылки
Создание эффектов наведения ссылок CSS может добавить немного изюминки на скучную веб-страницу. Если вы когда-либо оказывались в тупике, пытаясь создать эффект плавного наведения, у меня есть шесть CSS-эффектов, которые вы можете взять и использовать для своего следующего проекта.

Понимание HTML5 и CSS3 для веб-дизайна
Понимание HTML5 и CSS3 для веб-дизайна
Наша информация будет интересна тем, кто только начинает изучать и применять теги HTML5 при создании своих первых сайтов, а также в качестве справочной информации и для более опытных верстальщиков, чтобы не забывали.

QRcode

2010-2024 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.