← Усі статті

Cross-document View Transitions: підводні камені без фреймворка

Застарілий meta-тег, @view-transition { navigation: auto }, таймаут 4 с і pageswap/pagereveal — що пропускають туторіали.

Теги
cssНовиниweb platform
Cross-document View Transitions: підводні камені без фреймворка
Зміст

Коротко

View Transitions API тепер працює між окремими HTML-документами (MPA), не лише в SPA. CSS-Tricks збирає gotchas: застарілі гайди, тихі фейли та баги зі знімками зображень.

Що сталося

Раніше вмикали через <meta name="view-transition" content="same-origin"> — застаріло. Зараз:

@view-transition {
  navigation: auto;
}

Чому це важливо

Підводний камінь Суть
Таймаут ~4 с Інакше transition мовчки скасовується
Знімки картинок Ламається aspect ratio
pageswap / pagereveal Єдиний спосіб зрозуміти, чи спрацював перехід

На практиці

  1. Global CSS з @view-transition, не meta.
  2. На повільних сторінках — не покладатися на transition.
  3. Відладка через pagereveal і DevTools Animations.

Підсумок

Це реальний інструмент для MPA, але не «один рядок CSS» як у SPA.