Анимации перехода между страницами на основе нативного CSS Автоматическая навигация
Adam Khoury
0:00 / 0:00
Анимации перехода между страницами на основе нативного CSS Автоматическая навигация
993 просмотра · 7 мес. назад
Adam Khoury
188 тыс. подписчиков
993 просмотра · 7 мес. назад
В этом уроке я покажу вам, как использовать экспериментальный API `@view-transition` для создания плавной навигации между стандартными HTML-страницами, подобной навигации в приложении. Никаких маршрутизаторов, никакого управления состоянием, только мощь современной веб-платформы.
Вы также можете использовать API для перехода между отдельными элементами, а не всей страницей, присваивая им имя, ссылающееся на ID элемента в CSS.
Включить переходы между документами:
@view-transition {
navigation: auto;
}
1:45 — Демонстрация четырех эффектов
3:50 — Код эффекта «Затухание/Появление»
6:32 — Код эффекта «Киномасштаб»
7:30 — Код эффекта «Сдвиг»
7:57 — Код эффекта «Стирание»