Анимация CSS Grid Layout, что мы имеем?

Мы узнали, что в Firefox Nightly появилась поддержка анимации Grid. Что это значит и как это использовать? Серёжа Попов делится мыслями.

Из разных источников, например из твиттера CSS {IRL}, мы узнали, что в Firefox Nightly появилась поддержка анимации Grid.

Что это значит?

Сообщество продолжает развивать технологию Grid, несмотря на то, что многие продолжают игнорировать её, считая не готовой и неприменимой в реальной жизни. Разработчики браузеров тратят время, чтобы внедрить новые фичи для этой технологии. Да в тёмных сборках, но работает.

Фича уже заведена в трекер Chrome, а значит скоро мы увидим анимацию и в нём.

Как это работает?

Cообщество уже клепает демки. Первой была Мишель Баркер, а после Рейчел Эндрю.

Демо Мишель мне импонирует больше, но показывает не все возможности (да они работают только в Firefox Nightly).

Суть максимально проста, теперь вы можете анимировать на своё усмотрение изменение значений свойств grid-template-rows и grid-template-columns. Без написания дополнительного CSS кода, без JavaScript. Всё из коробки.

О чём молчит демка выше?

Анимация возможна не только по свойству animation. Свойство transition работает точно так же. Значит можно анимировать Grid по каким-либо условиям, а не только анимацией. Например, по клику.

Анимируется также свойство gap, как в animation, так и через transition. (к слову анимация gap работает в стабильной версии Chrome).

Без подвохов?

Подвох на самом деле один. Вы можете анимировать только значения свойств grid-template-rows и grid-template-columns. То есть вы не можете менять их количество. В этом случае анимация работать не будет.

Например.

Если вы применяете анимацию grid-template-columns: 1fr 1fr 1fr; на grid-template-columns: 1fr 5fr 1fr; всё окей, так как вы просто меняете пропорции центральной колонки.

Если вы попробуете сделать анимацию grid-template-columns: 1fr 1fr; на grid-template-columns: 1fr 1fr 1fr 1fr; ничего не получится. Вы меняете уже не пропорции текущей сетки, а строите новую. В целом, всё логично.

Итого

Хотелось бы конечно больше возможностей для анимации. Например, для изменения самой сетки, но непонятно, как это будет выглядеть. Или анимацию изменения размера элементов сетки, то есть когда мы меняет grid-column или grid-row. Но тут тоже есть сложности с тем, как должна выглядеть такая анимация.

Так что начало внедрения такой анимации с очевидных и понятных изменений - логично.

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