View Transition API - наконец завезли плавные переходы

Рет қаралды 532

Magisters | Обучение современным профессиям

Күн бұрын

Обозреваем новое API для плавных переходов между состояниями приложения и страниц. Очень впечатляющая фича - настоятельно рекомендую к просмотру 😉
Дока на MDN: developer.mozilla.org/en-US/d...
Дока на CFD: developer.chrome.com/docs/web...
Пример сайта с плейлистом: github.com/jakearchibald/http...
Клон Spotify: spotify-astro-transitions.ver...
Реализация для Next.js: github.com/shuding/next-view-...
0:00 Текущая реализация
1:56 Документация на MDN
7:24 Примеры реализации на CFD
10:30 Пример от Astro
12:04 Гонка за нативностью
12:50 Реализация для Next.js App Router
17:50 Vercel клали болт

Пікірлер: 4

@Black1991Star 8 күн бұрын

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

@webmagistersru 8 күн бұрын

скорее всего (не утверждаю), страница на которую совершается переход, парсится и рендерится перед снятием скриншота, как обычная страница, но по принципу offcanvas. вместе с этим выделяя отдельные блоки с view-transition-name в слои, как при использовании transform, и отдельно рендерит еще и их. если анимация состоит из множества слоев, то операция может занять немало времени, от того получаем тормоза на слабых девайсах (без gpu всё еще хуже). По поводу безопасности вроде как предусмотрели, и подобные переходы (следовательно и скриншоты) доступны только на same origin.