Сохранение интерактивности страницы во время View Transition
Я несколько раз в подкасте жаловался на то, что у прекрасного View Transition API есть один существенный недостаток: пока идёт анимация перехода, страница перестаёт быть интерактивной. То есть кнопки не нажимаются, ховеры не срабатывают и так далее.
В целом, оно и логично. Во время перехода по сути у вас одна картинка превращается в другую. Не очень понятно, куда клик должен проваливаться.
И вот Брамус поделился простым, но интересным решением.
Во время перехода на странице создаётся псевдоэлемент
Увы, есть нюанс. Сниппет действительно хороший, если вы используете VTA для анимации чего-то внутри документа. Карточка, которая превращается в другую карточку, например. А вот если вы сам документ и анимируете, то ничего не получится. То есть этот сниппет удобен как раз для того, чтобы не весь вьюпорт замораживать, а только ту область, которая анимируется.
У меня в проекте переключение темы сделано через VTA, и там этот сниппет, к сожалению, не применить, потому что тема переключается на всём документе единомоментно. Но я уже поигрался с тем, чтобы анимировать внутри страниц таким образом — нравится.
https://www.bram.us/2025/01/29/view-transitions-page-interactivity/
Я несколько раз в подкасте жаловался на то, что у прекрасного View Transition API есть один существенный недостаток: пока идёт анимация перехода, страница перестаёт быть интерактивной. То есть кнопки не нажимаются, ховеры не срабатывают и так далее.
В целом, оно и логично. Во время перехода по сути у вас одна картинка превращается в другую. Не очень понятно, куда клик должен проваливаться.
И вот Брамус поделился простым, но интересным решением.
::view-transition {
pointer-events: none;
}
Во время перехода на странице создаётся псевдоэлемент
::view-transition, который накладывается поверх вьюпорта. И ведь в CSS уже давно есть способ убирать с элементов обработку событий указателя. Классно! Классно же, да?Увы, есть нюанс. Сниппет действительно хороший, если вы используете VTA для анимации чего-то внутри документа. Карточка, которая превращается в другую карточку, например. А вот если вы сам документ и анимируете, то ничего не получится. То есть этот сниппет удобен как раз для того, чтобы не весь вьюпорт замораживать, а только ту область, которая анимируется.
У меня в проекте переключение темы сделано через VTA, и там этот сниппет, к сожалению, не применить, потому что тема переключается на всём документе единомоментно. Но я уже поигрался с тем, чтобы анимировать внутри страниц таким образом — нравится.
https://www.bram.us/2025/01/29/view-transitions-page-interactivity/