Новинка, которая позволяет легко анимировать переходы между состояниями страницы.
Теперь не нужно вручную прописывать сложные CSS- или JS-анимации — браузер сам создаёт плавный переход между старым и новым состоянием. Это экономит время и делает интерфейсы заметно приятнее.
Простейший пример:
document.startViewTransition(() => updateTheDOMSomehow());
Вызывается метод
document.startViewTransition(), внутрь которого передаётся функция с изменениями в DOM. Всё остальное — на стороне браузера.Как это работает?
Браузер "сохраняет" текущее состояние, выполняет изменения, сравнивает старую и новую версию и сам анимирует переход.
Особый интерес вызывает возможность подключить CSS-анимации через псевдоэлементы
::view-transition-old и ::view-transition-new. Это даёт больше гибкости: можно, например, задать эффект затухания для "старого" состояния и масштабирования для "нового".💡 Небольшое демо с CSS-анимацией перехода: CodePen
📚 Документация на MDN и классная статья в блоге Chrome
WEBIK | @gki_webik_ru