Перейти к содержимому

Анимации перехода между страницами на основе нативного 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 — Код эффекта «Стирание»