Думаю, вы видели такой паттерн, когда кольцо фокуса (обводка, которая рисуется вокруг сфокусированных элементов интерфейса) перемещается по странице плавно, с анимацией. Не резко перескакивает, как это делает браузер, а аккуратно перетекает. Для такого часто используются JS-библиотеки, которые играют в «угадай координату» и двигают по сути абсолютно спозиционированный элемент по странице.
Крис Койер пробует сделать версию попроще. Пускай во время перехода фокуса включается View Transition: включаем новое кольцо на новом элементе, старое выключаем, запускаем анимацию. Звучит интересно, и кода требует прям мало.
К сожалению, сделать хорошо не получилось:
• Во-первых, в единственном более-менее рабочем решении пришлось расставить дочерний
span в каждом интерактивном элементе. А хотелось бы вёрстку не править.• Во-вторых, управление фокусом идёт на уровне JS, а это уже риски что-то не учесть (браузер умеет это лучше, не пытайтесь его имитировать).
• В-третьих, если текст ссылки содержит перенос (то есть находится на двух строках сразу), то визуально всё неприлично разломано.
В комментариях к статье приложили демку с решением на Anchor Positioning. Там проблемы похожие, хотя лишний
span уже не нужен, и это радует.В общем, присмотреться к способу двигать что-то анимированно по странице новыми апишками точно стоит. А вот применять такое к фокусу — лучше не надо, рендеринг текста сложнее, чем просто коробочка с буквами. К сожалению, тут я скорее за то, чтобы использовать JS-библиотеки, проверенные временем.
https://frontendmasters.com/blog/animating-focus-with-view-transitions/
