В блоге осталось ещё много полезного. Вернуться?

Полезный материал / 15.01.2019

Размышления Серёжи Попова - Анимация CSS Grid Layout,
что мы имеем?

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

Скрин публикации CSS {IRL} в twitter

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

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

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

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

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

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

Демо Мишель мне импонирует больше, но показывает не все возможности (да они работают только в 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. Но тут тоже есть сложности с тем, как должна выглядеть такая анимация.

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

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

Спасибы

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

    Полный отзыв.pdf
    AGIMA Интерактивное агенство

    Александр Богданов, генеральный директор Agima

  • Команда Лиги А. проявляет положительные качества и должный уровень компетенции при решении поставленных задач и их адаптации на бекенде. Без понимания целей задачи и программных решений, на которых продукт будет запущен, успешные результаты были бы невозможны.

    Полный отзыв.pdf
    Интернет-агентство BINN

    Александр Иванов, директор по разработке BINN

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

    Полный отзыв.pdf
    ПИК Digital – ИТ на стройке

    Богдан Звягинцев, руководитель отдела разработки

  • На основе нашего взаимодействия, считаю, что ребята понимают и разделяют понятие «сделать» — что значит получить результат, к заданному сроку и с заданным качеством.

    Полный отзыв.pdf
    Агенство цифровых коммуникаций Molinos

    Гуров Андрей, руководитель проектов

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

    Полный отзыв.pdf
    its.agency - премиальный дизайн, маркетинг и разработка сложных решений

    Комнатный Сергей, генеральный директор ITS.agency

  • Ребята быстро понимают суть задач и подбирают под каждую задачу отдельную команду. Рекомендуем Лигу как надёжного партнёра по вёрстке проектов любой сложности.

    Полный отзыв.pdf
    Greenlabs - трансформируем ваш digital маркетинг в конкурентное преимущество

    Каморников Максим, исполнительный директор Greenlabs

  • Благодарим Лигу А. за сотрудничество в проекте. Понравилось качество итогового результата, оперативность старта работ и внесения правок, хорошая и быстрая коммуникация во время проекта. Будем рады обратиться ещё.

    Полный отзыв.pdf
    MobileUp – разработка мобильных приложений

    Денисюк Сергей, исполнительный директор MobileUp

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

    Полный отзыв.pdf