43. View Transitions API

CSS: View Transitions API - Плавные переходы между состояниями

Иллюстрация к уроку View Transitions API позволяет создавать плавные и визуально приятные переходы между различными состояниями вашего веб-приложения. Вместо резких изменений, элементы на странице будут анимированно перемещаться, изменяться в размере или исчезать, делая пользовательский опыт более интерактивным и современным.

Что такое View Transitions API?

View Transitions API – это новый способ управления переходами между состояниями DOM. Представьте, что у вас есть список товаров, и при нажатии на один из них открывается страница с детальным описанием. Без View Transitions API изменение контента произошло бы мгновенно. С API вы можете плавно “переместить” изображение товара из списка на страницу с деталями, создавая ощущение целостности и связности интерфейса.

Основные концепции и примеры

Основная функция API – document.startViewTransition(). Она принимает callback-функцию, которая выполняет изменения DOM. API захватывает состояние страницы до и после изменений, а затем анимирует разницу между ними.

Пример 1: Простой переход между двумя состояниями

<!DOCTYPE html>
<html>
<head>
  <title>View Transitions Example</title>
  <style>
    body {
      font-family: sans-serif;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transition: background-color 0.5s ease;
    }
    .box.changed {
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="myButton">Изменить цвет</button>

  <script>
    const button = document.getElementById('myButton');
    const box = document.getElementById('myBox');

    button.addEventListener('click', () => {
      document.startViewTransition(() => {
        box.classList.toggle('changed'); // Изменяем состояние DOM
      });
    });
  </script>
</body>
</html>

В этом примере при нажатии на кнопку цвет квадрата плавно меняется. document.startViewTransition() выполняет callback, в котором мы добавляем/удаляем класс changed, который, в свою очередь, меняет цвет фона с помощью CSS transition.

Пример 2: Переход с использованием ::view-transition-old и ::view-transition-new

Для более тонкого контроля над анимацией можно использовать псевдоэлементы ::view-transition-old и ::view-transition-new. Они позволяют стилизовать старое и новое состояния элемента соответственно.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation-name: fade-out;
}

::view-transition-new(root) {
  animation-name: fade-in;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

Этот CSS код задает анимацию плавного появления и исчезновения для всей страницы (root).

Жизненный пример

Многие современные сайты и приложения используют подобные переходы для улучшения пользовательского опыта. Например:

SPA (Single Page Applications): Фреймворки, такие как React, Vue, и Angular, могут интегрировать View Transitions API для создания плавных переходов между страницами без полной перезагрузки.
E-commerce сайты: При переходе от списка товаров к детальной странице товара, можно использовать View Transitions API для анимированного “перемещения” изображения товара, создавая ощущение связи между двумя страницами.
Мобильные приложения (PWA): PWA, стремящиеся к “нативному” опыту, могут использовать View Transitions API для имитации переходов между экранами, характерных для мобильных приложений.

Ключевые моменты

document.startViewTransition() – основной метод для запуска перехода.
Callback-функция в startViewTransition() должна содержать изменения DOM.
::view-transition-old и ::view-transition-new позволяют стилизовать старое и новое состояния элементов.
API обеспечивает плавные переходы между состояниями, улучшая UX.
View Transitions API может быть использован для создания более интерактивных и “живых” веб-приложений.