Кажется странным, что сначала в браузерах (браузере?) появились переходы между страницами aka View Transitions, и только сейчас — между элементами.
В Chrome 147, наконец, добавили element-scoped view transitions.
До этого если хотелось анимировать, например, сортировку списка, приходилось запускать document.startViewTransition() — даже если менялся один маленький блок.
Выглядело это примерно так:
document.startViewTransition(() => {
list.sort(...)
render()
})
Теперь можно запустить переход прямо на контейнере списка:
listElement.startViewTransition(() => {
list.sort(...)
render()
})
И в этот момент браузер работает только с этим куском DOM.
На практике это означает, что можно спокойно:
— анимировать список
— параллельно обновить, например, сайдбар
— и одно не будет цеплять другое
Сплошные плюсы.
Собственно, статья:
https://developer.chrome.com/blog/element-scoped-view-transitions
Что ещё в Chrome 147:
https://developer.chrome.com/blog/new-in-chrome-147
#chrome #view #transitions