🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Плавные переходы могут сломать интерактивность вашего сайта, но этого легко избежать
Представьте, вы завернули в плавный переход сортировку таблицы, открытие картинки на весь экран или перестановку карточек в списке — всё то, ради чего и берут startViewTransition(). Пока анимация идёт, пользователь жмёт кнопку в другом углу экрана, и ничего не происходит. Он жмёт ещё раз, но ничего не происходит.
Дело не в вашем коде. На время перехода браузер кладёт поверх страницы псевдоэлемент ::view-transition размером во весь вьюпорт, и клики достаются ему. Разобрал это Крис Койер, придумавший CSS-Tricks и CodePen: в его демке рядом с анимацией стоит кнопка с alert(), и пока идёт переход, она не отвечает.
Проверить у себя просто: растяните длительность перехода секунд до десяти и откройте в DevTools дерево псевдоэлементов. Наведите курсор на ::view-transition — подсветится весь экран.
К счастью, лечится проблема всего в две строки. Снимаем у :root дефолтный view-transition-name, чтобы корень не попадал в снимок, и разрешаем кликать сквозь оверлей:
:root { view-transition-name: none; }
::view-transition { pointer-events: none; }
Альтернатива — вызывать startViewTransition() не на document, а на контейнере с нужными элементами: тогда и оверлей накроет только его. Но поддержка у этого варианта хуже, так что по умолчанию проще держать две строки выше.
#css