🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
#статья дня
В CSS предлагают добавить роутинг
Сейчас без JS кастомные анимации перехода по страницам практически невозможны: ловить переход, смотреть исходный и конечный URL, определять, по какой ссылке кликнули, и уже после этого выбирать нужный View Transition.
В черновике CSS Route and Navigation Matching предлагают описывать эту логику прямо в CSS.
Всё можно описать декларативно, если ты достаточно смел. Ну вы поняли.
Например, сначала объявить маршруты:
@route --home {
pathname: url-pattern("/");
}
@route --article {
pathname: url-pattern("/articles/:id");
}
А потом задать отдельную анимацию для перехода с главной на статью:
@navigation (from: --home) and (to: --article) {
@view-transition {
navigation: auto;
types: slide-left;
}
}
Для перехода назад можно использовать другой тип анимации.
Кроме @route и @navigation, в черновике есть :nav-source — селектор элемента, с которого начался переход, и :link-to() — селектор ссылок, ведущих на определённый маршрут.
Самый понятный пример — список карточек. Пользователь нажимает на изображение, открывается отдельная страница, а именно эта картинка плавно превращается в большое изображение статьи. Сейчас для такого обычно нужен JavaScript, который найдёт нажатый элемент и назначит ему view-transition-name. Здесь это хотят сделать без ручной обвязки.
Роутер это, конечно, не заменяет. CSS не будет загружать страницы или управлять историей браузера. Он просто сможет выбирать стили и анимации с учётом того, между какими адресами происходит переход.
Пока это ранний Editor’s Draft, поэтому синтаксис ещё вполне может измениться. Попробовать можно в Chrome Canary с включённым Experimental Web Platform Features.
Подробный разбор — у Ван Дамма нашего Брамуса, сам черновик — на сайте CSSWG.
#route #css #view #transition