Анимации переходов

Astro поддерживает переходы типов opt-in, per-page, view с помощью всего нескольких строк кода. Переходы типа view обновляют содержимое страницы без обычного обновления навигации браузера по всей странице и обеспечивают плавную анимацию между страницами.

Astro предоставляет компонент маршрутизации <ViewTransitions />, который можно добавить в <head> отдельной страницы, чтобы управлять переходами между страницами. Он предоставляет лёгкий маршрутизатор на стороне клиента, который перехватывает навигацию и позволяет настраивать переход между страницами.

Добавьте этот компонент к многократно используемому компоненту .astro, например, к общему элементу <head> или макету, для анимированных переходов страниц на всем сайте (режим SPA).

Поддержка анимации переходов в Astro осуществляется с помощью нового API браузера View Transitions и также включает в себя:

Несколько встроенных директив анимации, таких как fade, lide и none.
Поддержка анимации навигации вперёд и назад.
Возможность полностью настраивать все аспекты анимации переходов и создавать собственные анимации.
Опция предотвращения навигации на стороне клиента для нестраничных ссылок.
Контроль над поведением по умолчанию для браузеров, которые ещё не поддерживают API View Transitions.
Автоматическая поддержка prefers-reduced-motion.

Добавление анимации переходов на страницу

Перейдите к использованию переходов представления на отдельных страницах, импортировав и добавив компонент маршрутизации <ViewTransitions /> в <head> на каждой нужной странице.

---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="ru">
  <head>
    <title>Моя домашняя страница</title>
    <ViewTransitions />
  </head>
  <body>
    <h1>Добро пожаловать на мой сайт!</h1>
  </body>
</html>

Полноценные переходы между страницами сайта (режим SPA)

Импортируйте и добавьте компонент <ViewTransitions /> в общий компонент <head> или общий компонент макета. Astro создаст анимацию страницы по умолчанию, основываясь на сходстве между старой и новой страницами, а также обеспечит обратное поведение для неподдерживаемых браузеров.

В приведённом ниже примере показано добавление анимации навигации по страницам, используемой Astro по умолчанию для всего сайта, включая вариант управления по умолчанию для неподдерживающих браузеров, путём импорта и добавления этого компонента в компонент <CommonHead /> Astro:

---
import { ViewTransitions } from 'astro:transitions';
---
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />

<!-- Основные метатеги -->
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />

<ViewTransitions />

Для включения навигации Astro по умолчанию на стороне клиента не требуется никаких других настроек!

Для более тонкого контроля используйте директивы переходов или override default client-side navigation для отдельных элементов.

Директивы переходов

Astro автоматически присвоит соответствующим элементам, находящимся как на старой, так и на новой странице, общее уникальное имя view-transition-name. Эта пара совпадающих элементов определяется как по типу элемента, так и по его расположению в DOM.

Используйте необязательные директивы transition:* для элементов страницы в компонентах .astro для более тонкого контроля над поведением перехода страницы во время навигации.

transition:name: Позволяет переопределить стандартное сопоставление элементов в Astro для анимации старого/нового контента и указать имя перехода, чтобы связать пару элементов DOM.
transition:animate: Позволяет отменить анимацию по умолчанию в Astro, заменив старый элемент на новый, указав тип анимации. Используйте встроенные директивы анимации или создайте собственные анимации переходов в Astro.
transition:persist: Позволяет отменить стандартную замену Astro старых элементов на новые и вместо этого сохранять компоненты и HTML-элементы при переходе на другую страницу.

Именование перехода

В некоторых случаях вам может понадобиться самостоятельно определить соответствующие элементы анимации перехода. Вы можете задать имя для пары элементов с помощью директивы transition:name.

<aside transition:name="hero">

<aside transition:name="hero">

Обратите внимание, что предоставленное значение transition:name может быть использовано только один раз на каждой странице. Установите этот параметр вручную, если Astro не может самостоятельно определить правильное имя, или для более тонкого контроля над сопоставлением элементов.

Поддержание состояния

Добавлено в: astro@2.10.0

Можно сохранять компоненты и HTML-элементы (вместо того, чтобы заменять их) при переходе по странице с помощью директивы transition:persist.

Например, следующее <video> будет продолжать воспроизводиться при переходе на другую страницу, содержащую тот же видеоэлемент. Это работает как при навигации вперёд, так и назад.

<video controls="" autoplay="" transition:persist>
  <source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>

Вы также можете поместить директиву на остров Astro (компонент UI-фреймворка с директивой client: (EN)). Если этот компонент существует на следующей странице, остров со старой страницы с его текущим состоянием будет продолжать отображаться, а не заменяться островом с новой страницы.

В приведённом ниже примере внутреннее состояние счётчика компонента не будет сбрасываться при переходе туда и обратно по страницам, содержащим компонент <Counter /> с атрибутом transition:persist.

<Counter client:load transition:persist initialCount={5} />

Вы также можете вручную идентифицировать соответствующие элементы, если остров/элемент находится в другом компоненте между двумя страницами.

<Video controls="" autoplay="" transition:name="media-player" transition:persist />

<MyVideo controls="" autoplay="" transition:name="media-player" transition:persist />

В качестве удобного сокращения transition:persist также может принимать в качестве значения имя перехода.

<video controls="" autoplay="" transition:persist="media-player">

`transition:persist-props`

Добавлено в: astro@4.5.0

Это позволяет вам контролировать, должны ли входные данные (пропсы) острова сохраняться при навигации.

По умолчанию, когда вы добавляете transition:persist к острову, состояние сохраняется при навигации, но ваш компонент будет повторно отображаться с новыми входными данными. Это полезно, например, когда компонент получает свойства, специфичные для страницы, такие как заголовок текущей страницы.

Вы можете переопределить это поведение с помощью transition:persist-props. Добавление этой директивы сохранит существующие пропсы острова (без повторной визуализации с новыми значениями) в дополнение к сохранению существующего состояния.

Встроенные директивы анимации

Astro поставляется с несколькими встроенными анимациями, позволяющими переопределить переход fade по умолчанию. Добавьте директиву «transition:animate» к отдельным элементам, чтобы настроить поведение определённых переходов.

fade (по умолчанию): Упрямая анимация с плавным затуханием. Старый контент исчезает, а новый появляется.
initial: Откажитесь от самоуверенной анимации плавного затухания Astro и используйте стиль браузера по умолчанию.
slide: Анимация, в которой старый контент выдвигается слева, а новый — справа. При обратной навигации анимация противоположная.
none: Отключите анимацию браузера по умолчанию. Используйте в элементе <html> страницы, чтобы отключить затухание по умолчанию для каждого элемента на странице.

Комбинируйте директивы для полного контроля над анимацией вашей страницы. Установите значение страницы по умолчанию для элемента <html> и переопределите его для любых отдельных элементов по желанию.

В приведённом ниже примере создается слайд-анимация для основного содержимого при отключении анимации затухания браузера по умолчанию для остальной части страницы:

---
import CommonHead from '../components/CommonHead.astro';
---

<html transition:animate="none">
  <head>
    <CommonHead />
  </head>
  <body>
    <header>
      ...
    </header>
    <!-- Переопределяем страницу по умолчанию для одного элемента -->
    <main transition:animate="slide">
      ...
    </main>
  </body>
</html>

Настройка анимации

Можно настроить все аспекты перехода с помощью любых свойств анимации CSS.

Чтобы настроить встроенную анимацию, сначала импортируйте её из astro:transitions, а затем передайте параметры настройки.

В приведённом ниже примере настраивается длительность встроенной анимации fade:

---
import { fade } from 'astro:transitions';
---

<header transition:animate={fade({ duration: '0.4s' })}>

Вы также можете определить собственные анимации для использования с transition:animate, задав поведение вперёд и назад, а также новые и старые страницы в соответствии со следующими типами:

export interface TransitionAnimation {
  name: string; // The name of the keyframe
  delay?: number | string;
  duration?: number | string;
  easing?: string;
  fillMode?: string;
  direction?: string;
}

export interface TransitionAnimationPair {
  old: TransitionAnimation | TransitionAnimation[];
  new: TransitionAnimation | TransitionAnimation[];
}

export interface TransitionDirectionalAnimations {
  forwards: TransitionAnimationPair;
  backwards: TransitionAnimationPair;
}

В следующем примере показаны все необходимые свойства для определения пользовательской анимации fade:

---
const anim = {
  old: {
    name: 'fadeIn',
    duration: '0.2s',
    easing: 'linear',
    fillMode: 'forwards',
  },
  new: {
    name: 'fadeOut',
    duration: '0.3s',
    easing: 'linear',
    fillMode: 'backwards',
  }
};

const myFade = {
  forwards: anim,
  backwards: anim,
};
---

<header transition:animate={myFade}> ... </header>

Управление маршрутизатором

Маршрутизатор <ViewTransitions /> обрабатывает навигацию, прослушивая:

Клики по элементам <a>.
События навигации назад и вперёд.

Следующие опции позволяют дополнительно контролировать процесс навигации в маршрутизаторе:

data-astro-reload: Атрибут тега <a> для принудительной полностраничной навигации
data-astro-history="auto | push | replace": атрибут тега <a> для управления историей браузера
navigate(href, options): метод, доступный любому клиентскому скрипту или клиентскому компоненту для запуска навигации

Предотвращение навигации на стороне клиента

В некоторых случаях навигация с помощью маршрутизации на стороне клиента невозможна, поскольку обе страницы должны использовать маршрутизатор <ViewTransitions />, чтобы предотвратить перезагрузку всей страницы. Возможно, вам также не нужна маршрутизация на стороне клиента при каждом изменении навигации, и вы предпочтёте традиционную постраничную навигацию по выбранным маршрутам.

Вы можете отказаться от маршрутизации на стороне клиента для каждой ссылки, добавив атрибут data-astro-reload к любому тегу <a> или <form>. Этот атрибут отменяет все существующие компоненты <ViewTransitions /> и вместо этого запускает обновление браузера во время навигации.

В следующем примере показано предотвращение маршрутизации на стороне клиента при переходе к статье только с главной страницы. Это всё ещё позволяет использовать анимацию на общих элементах, таких как изображение героя, при переходе на ту же страницу со страницы листинга статей:

<a href="/articles/emperor-penguins" data-astro-reload>

<a href="/articles/emperor-penguins">

Ссылки с атрибутом data-astro-reload будут проигнорированы маршрутизатором, и произойдёт полностраничная навигация.

Навигация по триггерам

Вы также можете запускать навигацию на стороне клиента по событиям, которые обычно не прослушиваются маршрутизатором <ViewTransitions />, используя navigate. Эта функция из модуля astro:transitions/client может использоваться в скриптах, а также в компонентах фреймворка, которые гидратированы с помощью директивы client (EN).

В следующем примере показан компонент Astro, который переводит посетителя на другую страницу, выбранную им из меню:

<script>
  import { navigate } from 'astro:transitions/client';

  // Navigate to the selected option automatically.
  document.querySelector('select').onchange = (ev) => {
    let href = ev.target.value;
    navigate(href);
  };
</script>
<select>
  <option value="/play">Игра</option>
  <option value="/blog">Блог</option>
  <option value="/about">О сайте</option>
  <option value="/contact">Контакты</option>
</select>

---
import Form from "../components/Form.astro";
import { ViewTransitions } from "astro:transitions";
---
<html>
  <head>
    <ViewTransitions />
  </head>
  <body>
    <Form />
  </body>
</html>

Следующий пример реализует то же самое с помощью navigate() в компоненте React <Form />:

import { navigate } from "astro:transitions/client";

export default function Form() {
  return (
    <select onChange={(e) => navigate(e.target.value)}>
      <option value="/play">Play</option>
      <option value="/blog">Blog</option>
      <option value="/about">About</option>
      <option value="/contact">Contact</option>
    </select>
  );
}

Компонент <Form /> может быть отображен на странице Astro, использующей маршрутизатор <ViewTransitions />, с помощью директивы client:

---
import Form from "../components/Form.jsx";
import { ViewTransitions } from "astro:transitions";
---
<html>
  <head>
    <ViewTransitions />
  </head>
  <body>
    <Form client:load />
  </body>
</html>

Метод navigate принимает эти аргументы:

href (обязательно) - Новая страница, на которую нужно перейти.
options - Необязательный объект со следующими свойствами:
- history: 'push' | 'replace' | 'auto'
  - 'push': маршрутизатор будет использовать history.pushState для создания новой записи в истории браузера.
  - 'replace': маршрутизатор будет использовать history.replaceState для обновления URL без добавления новой записи в навигацию.
  - 'auto' (по умолчанию): маршрутизатор попытается использовать history.pushState, но если URL не является тем, на который можно перейти, текущий URL останется без изменений в истории браузера.
- formData: Объект FormData для POST запросов.

Для навигации по истории браузера назад и вперёд можно комбинировать navigate() со встроенными функциями браузера history.back(), history.forward() и history.go(). Если navigate() вызывается во время отрисовки компонента на стороне сервера, это не имеет никакого эффекта.

Замена записей в истории браузера

Обычно при каждом переходе новая запись записывается в историю браузера. Это позволяет перемещаться между страницами с помощью кнопок браузера назад и вперёд.

Маршрутизатор <ViewTransitions /> позволяет перезаписывать записи истории, добавляя атрибут data-astro-history к любому отдельному тегу <a>.

Атрибут data-astro-history может иметь те же три значения, что и опция history функции navigate():

data-astro-history: 'push' | 'replace' | 'auto'

'push': маршрутизатор будет использовать history.pushState для создания новой записи в истории браузера.
'replace': маршрутизатор будет использовать history.replaceState для обновления URL без добавления новой записи в навигацию.
'auto' (по умолчанию): маршрутизатор попытается использовать history.pushState, но если URL не является тем, на который можно перейти, текущий URL останется без изменений в истории браузера.

Следующий пример переходит на страницу /main, но не добавляет новую запись в историю просмотров. Вместо этого он использует текущую запись в истории (/confirmation) и перезаписывает её.

<a href="/main" data-astro-history="replace">

В результате, если вы вернетесь со страницы /main, браузер отобразит не страницу /confirmation, а страницу перед ней.

Переходы с формами

Добавлено в: astro@4.0.0

Маршрутизатор <ViewTransitions /> запускает внутристраничные переходы из элементов <form>, поддерживая как GET, так и POST запросы.

По умолчанию Astro отправляет данные формы в формате multipart/form-data, когда атрибут method имеет значение POST. Если вы хотите соответствовать стандартному поведению веб-браузеров, используйте атрибут enctype для отправки данных в кодировке application/x-www-form-urlencoded:

<form action="/contact" method="POST" enctype="application/x-www-form-urlencoded">
  <!-- -->
</form>

Можно отказаться от переходов маршрутизатора на любой отдельной форме с помощью атрибута data-astro-reload:

<form action="/contact" data-astro-reload>
  <!-- -->
</form>

Резервное управление

Маршрутизатор <ViewTransitions /> лучше всего работает в браузерах, поддерживающих View Transitions (браузеры на базе Chromium), но также включает в себя поддержку поведения по умолчанию для других браузеров. Даже если браузер не поддерживает API View Transitions, Astro всё равно обеспечит внутрибраузерную навигацию с помощью одного из запасных вариантов для сопоставимого опыта.

Можно переопределить оддержку поведения по умолчанию в Astro, добавив свойство fallback для компонента <ViewTransitions /> и установив для него значение swap или none:

animate (по умолчанию, рекомендуется) - перед обновлением содержимого страницы Astro будет имитировать анимацию переходов с помощью пользовательских атрибутов.
swap - Astro не будет пытаться анимировать страницу. Вместо этого старая страница будет немедленно заменена новой.
none - Astro не будет делать никаких анимированных переходов между страницами. Вместо этого вы получите полностраничную навигацию в неподдерживающих браузерах.

---
import { ViewTransitions } from 'astro:transitions';
---
<title>My site</title>

<ViewTransitions fallback="swap" />

Процесс навигации на стороне клиента

При использовании маршрутизатора <ViewTransitions /> для создания навигации Astro на стороне клиента выполняются следующие действия:

Посетитель вашего сайта запускает навигацию любым из следующих действий:
- Щелчок по тегу <a>, содержащему внутреннюю ссылку на другую страницу вашего сайта.
- Нажатие кнопки «Назад».
- Нажатие кнопки «Вперёд».
Маршрутизатор начинает поиск следующей страницы.
Маршрутизатор добавляет атрибут data-astro-transition к элементу HTML со значением 'forward' или 'back' в зависимости от ситуации.
Маршрутизатор вызывает document.startViewTransition. Это запускает собственный процесс анимации переходов браузера. Важно, что браузер делает скриншот текущего состояния страницы.
Внутри обратного вызова startViewTransition маршрутизатор выполняет процесс swap, который состоит из следующей последовательности событий:
- Содержимое <head> меняется местами, а некоторые элементы сохраняются:
  - Узлы DOM таблицы стилей оставляются, если они существуют на новой странице, чтобы предотвратить появление неоформленного контента при загрузке.
  - Скрипты оставляются, если они существуют на новой странице.
  - Любые другие элементы заголовка с transition:persist остаются, если на новой странице есть соответствующий элемент.
- <body> полностью заменяется телом новой страницы.
- Элементы с пометкой transition:persist переносятся в новый DOM, если они существуют на новой странице.
- При необходимости положение прокрутки восстанавливается.
- Событие astro:after-swap срабатывает на документе. На этом процесс swap заканчивается.
Маршрутизатор ожидает загрузки новых таблиц стилей, прежде чем разрешить переход.
Маршрутизатор выполняет все новые скрипты, добавленные на страницу.
Срабатывает событие astro:page-load. На этом процесс навигации заканчивается.

Поведение скриптов при анимации переходов

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

Порядок выполнения скриптов

При переходе между страницами с помощью компонента <ViewTransitions /> скрипты запускаются в последовательном порядке, чтобы соответствовать поведению браузера.

Повторное выполнение скриптов

Скрипты встроенных модулей, которые являются скриптами по умолчанию в Astro, выполняются только один раз. После первоначального выполнения они будут игнорироваться, даже если скрипт будет существовать на новой странице после перехода.

В отличие от скриптов встроенных модулей, встроенные скрипты могут быть повторно выполнены во время посещения сайта пользователем, если они находятся на странице, которая посещается несколько раз. Встроенные скрипты могут также повторно выполняться, когда посетитель переходит на страницу без скрипта, а затем обратно на страницу со скриптом.

`data-astro-rerun`

Добавлено в: astro@4.5.0

Чтобы заставить встроенные скрипты повторно выполняться после каждого перехода, добавьте свойство data-astro-rerun. Добавление любого атрибута к скрипту также неявно добавляет is:inline, поэтому это доступно только для скриптов, которые не собираются и не обрабатываются Astro.

<script is:inline data-astro-rerun>...</script>

Чтобы скрипт запускался каждый раз при загрузке страницы во время навигации на стороне клиента, он должен выполняться по событию жизненного цикла. Например, слушатели событий для DOMContentLoaded могут быть заменены событием жизненного цикла astro:page-load.

Если у вас есть код, который устанавливает глобальное состояние во встроенном скрипте, это состояние должно учитывать, что скрипт может выполняться более одного раза. Проверьте глобальное состояние в теге <script> и по возможности выполняйте код условно. Это работает, потому что window сохраняется.

<script is:inline>
  if (!window.SomeGlobal) {
    window.SomeGlobal = {} // ....
  }
</script>

События жизненного цикла

Маршрутизатор <ViewTransition /> вызывает ряд событий на документе во время навигации. Эти события позволяют подключаться к жизненному циклу навигации, чтобы показывать индикаторы загрузки новой страницы, переопределять поведение по умолчанию и восстанавливать состояние по завершении навигации.

Процесс навигации включает в себя фазу подготовки, когда загружается новый контент; этап DOM swap, на котором содержимое старой страницы заменяется содержимым новой; и фаза завершения, на которой выполняются скрипты, сообщается о завершении загрузки и выполняется очистка.

События жизненного цикла API View Transition от Astro расположены в следующем порядке:

astro:before-preparation
astro:after-preparation
astro:before-swap
astro:after-swap
astro:page-load

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

`astro:before-preparation`

Добавлено в: astro@3.6.0

Событие, которое возникает в начале фазы подготовки, после начала навигации (например, после того, как пользователь перешёл по ссылке), но до загрузки контента.

Это событие используется:

Выполнение действий до начала загрузки, например, показ спиннера загрузки.
Чтобы изменить загрузку, например, загрузить содержимое, заданное в шаблоне, а не из внешнего URL.
Чтобы изменить направление навигации (обычно либо вперёд, либо назад) для пользовательской анимации.

Вот пример использования события astro:before-preparation для загрузки спиннера до загрузки контента и его остановки сразу после загрузки. Обратите внимание, что использование обратного вызова загрузчика таким образом позволяет выполнять код асинхронно.

<script is:inline>
  document.addEventListener('astro:before-preparation', ev => {
    const originalLoader = ev.loader;
    ev.loader = async function() {
      const { startSpinner } = await import('./spinner.js');
      const stop = startSpinner();
      await originalLoader();
      stop();
    };
  });
</script>

`astro:after-preparation`

Добавлено в: astro@3.6.0

Событие, которое срабатывает в конце фазы подготовки, после того как содержимое новой страницы было загружено и разобрано в документ. Это событие происходит перед фазой перехода к просмотру.

В этом примере используется событие astro:before-preparation для запуска индикатора загрузки и событие astro:after-preparation для его остановки:

<script is:inline>
  document.addEventListener('astro:before-preparation', () => {
    document.querySelector('#loading').classList.add('show');
  });
  document.addEventListener('astro:after-preparation', () => {
    document.querySelector('#loading').classList.remove('show');
  });
</script>

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

`astro:before-swap`

Добавлено в: astro@3.6.0

Событие, которое срабатывает перед тем, как новый документ (который заполняется во время фазы подготовки) заменит текущий документ. Это событие происходит внутри перехода, когда пользователь всё ещё видит снимок старой страницы.

Это событие можно использовать для внесения изменений до того, как произойдет подмена. Свойство newDocument этого события представляет входящий документ. Вот пример того, как обеспечить перенос предпочтений светлого или тёмного режима браузера в localStorage на новую страницу:

<script is:inline>
  function setDarkMode(document) {
    let theme = localStorage.darkMode ? 'dark' : 'light';
    document.documentElement.dataset.theme = theme;
  }

  setDarkMode(document);

  document.addEventListener('astro:before-swap', ev => {
    // Передайте входящий документ, чтобы установить для него тему
    setDarkMode(ev.newDocument);
  });
</script>

Событие astro:before-swap также может быть использовано для изменения реализации подкачки. Реализация подкачки по умолчанию различает содержимое заголовка, перемещает постоянные элементы из старого документа в newDocument, а затем заменяет весь body телом нового документа.

На этом этапе жизненного цикла вы можете определить свою собственную реализацию подкачки, например, диффундировать всё содержимое существующего документа (что делают некоторые другие маршрутизаторы):

<script is:inline>
  document.addEventListener('astro:before-swap', ev => {
    ev.swap = () => {
      diff(document, ev.newDocument);
    };
  });
</script>

`astro:after-swap`

Событие, которое срабатывает сразу после того, как новая страница заменит старую. Можно прослушать это событие на document и запустить действия, которые произойдут перед отрисовкой элементов DOM новой страницы и запуском скриптов.

Это событие, прослушиваемое на исходящей странице, полезно для передачи и восстановления любого состояния DOM, которое должно быть перенесено на новую страницу.

Это последний момент в жизненном цикле, когда ещё безопасно, например, добавить имя класса тёмного режима (<html class="dark-mode">), хотя вы можете захотеть сделать это в более раннем событии.

Событие astro:after-swap происходит сразу после обновления истории браузера и установки позиции прокрутки. Поэтому одним из вариантов использования этого события является отмена восстановления прокрутки по умолчанию для навигации по истории. В следующем примере для каждой навигации горизонтальная и вертикальная прокрутка устанавливается в левый верхний угол страницы.

document.addEventListener('astro:after-swap',
  () => window.scrollTo({ left: 0, top: 0, behavior: 'instant' }))

`astro:page-load`

Событие, которое срабатывает в конце навигации по странице, после того как новая страница становится видимой для пользователя и загружаются блокирующие стили и скрипты. Вы можете прослушать это событие на document.

Компонент <ViewTransitions /> вызывает это событие как при начальном переходе по странице с предварительной отрисовкой, так и при любом последующем переходе, как вперёд, так и назад.

Можно использовать это событие для запуска кода при каждой навигации по странице или только единожды:

<script>
  document.addEventListener('astro:page-load', () => {
    // Это выполняется только один раз.
    setupStuff();
  }, { once: true });
</script>

Доступность

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

Объявление о маршруте

Добавлено в: astro@3.2.0

Компонент <ViewTransitions /> включает в себя анонс маршрута для навигации по странице во время маршрутизации на стороне клиента. Для этого не требуется никаких настроек или действий.

Вспомогательные технологии дают посетителям понять, что страница изменилась, объявляя после навигации новый заголовок страницы. При использовании маршрутизации на стороне сервера с традиционным полностраничным обновлением браузера это происходит по умолчанию после загрузки новой страницы. При маршрутизации на стороне клиента это действие выполняет компонент <ViewTransitions />.

Чтобы добавить анонс маршрута в маршрутизацию на стороне клиента, компонент добавляет элемент на новую страницу с атрибутом aria-live, установленным на assertive. Это указывает вспомогательным технологиям на необходимость немедленного объявления. Для определения текста объявления компонент также проверяет наличие следующих пунктов (в порядке приоритета):

Заголовок <title>, если он существует.
Первый <h1>, который он найдет.
Имя страницы.

Мы настоятельно рекомендуем всегда включать <title> в каждую страницу для обеспечения доступности.

`prefers-reduced-motion`

Компонент Astro <ViewTransitions /> включает медиазапрос CSS, который отключает все анимации переходов, включая анимацию возврата, при обнаружении параметра prefer-reduced-motion. Вместо этого браузер просто поменяет местами элементы DOM без анимации.

Обновление до v3.0 с v2.x

В Astro v3.0 анимации переходов больше не находятся под экспериментальным флагом.

Если вы не включили этот экспериментальный флаг в Astro 2.x, это не приведёт к каким-либо изменениям в вашем проекте. Новый API View Transitions не влияет на существующий код.

Если вы ранее использовали экспериментальные анимации переходов, то при обновлении проекта Astro с предыдущей версии могут произойти некоторые изменения.

Следуйте приведённым ниже инструкциям для обновления проекта Astro v2.x с опцией experimental.viewTransitions: true до v3.0.

Обновление с опцией `experimental.viewTransitions`

Если вы ранее включили экспериментальный флаг для анимации переходов, вам нужно будет обновить проект до версии Astro 3.0, которая теперь позволяет такие переходы по умолчанию.

Удаление флага `experimental.viewTransitions`

Снимите флаг experimental:

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
   viewTransitions: true
  }
});

Обновление источника импорта

Компонент <ViewTransitions /> был перемещен из astro:components в astro:transitions. Обновите источник импорта для всех вхождений в проекте.

---
import { ViewTransitions } from "astro:components astro:transitions"
---
<html lang="ru">
  <head>
    <title>Моя домашняя страница</title>
    <ViewTransitions />
  </head>
  <body>
    <h1>Добро пожаловать на мой сайт!</h1>
  </body>
</html>

Обновление директив `transition:animate`

Изменено: Значение morph параметра transition:animate было переименовано в initial. Кроме того, эта анимация больше не используется по умолчанию. Если директива transition:animate не указана, анимация теперь будет по умолчанию fade.

Переименуйте все анимации morph в initial.
src/components/MyComponent.astro
```
<div transition:name="name" transition:animate="morph initial" />
```
Чтобы сохранить все анимации, которые ранее использовали morph по умолчанию, явно добавьте transition:animate="initial".
src/components/MyComponent.astro
```
<div transition:name="name" transition:animate="initial" />
```
Вы можете смело удалить все анимации, явно установленные на fade. Теперь это поведение по умолчанию:
src/components/MyComponent.astro
```
<div transition:name="name" transition:animate="fade" />
```

Добавлено: Astro также поддерживает новое значение none для параметра transition:animate. Это значение можно использовать в элементе <html> страницы, чтобы отключить анимированные полностраничные переходы на всей странице. Это отменяет поведение анимации по умолчанию только для элементов страницы без директивы анимации. Вы по-прежнему можете задавать анимацию для отдельных элементов, и эти анимации будут происходить.

Теперь вы можете отключить все переходы по умолчанию на отдельной странице, анимируя только те элементы, которые явно используют директиву transition:animate:
```
<html transition:animate="none">
  <head></head>
  <body>
    <h1>Привет, мир!</h1>
  </body>
</html>
```

Обновление названий событий

Событие astro:load было переименовано в astro:page-load. Переименуйте все вхождения в вашем проекте.

<script>
document.addEventListener('astro:load astro:page-load', runSetupLogic);
</script>

Событие astro:beforeload было переименовано в astro:after-swap. Переименуйте все вхождения в вашем проекте.

<script>
document.addEventListener('astro:beforeload astro:after-swap', setDarkMode);
</script>

Внести свой вклад

Сообщество

Анимации переходов

Добавление анимации переходов на страницу

Полноценные переходы между страницами сайта (режим SPA)

Директивы переходов

Именование перехода

Поддержание состояния

`transition:persist-props`

Встроенные директивы анимации

Настройка анимации

Управление маршрутизатором

Предотвращение навигации на стороне клиента

Навигация по триггерам

Замена записей в истории браузера

Переходы с формами

Резервное управление

Процесс навигации на стороне клиента

Поведение скриптов при анимации переходов

Порядок выполнения скриптов

Повторное выполнение скриптов

`data-astro-rerun`

События жизненного цикла

`astro:before-preparation`

`astro:after-preparation`

`astro:before-swap`

`astro:after-swap`

`astro:page-load`

Доступность

Объявление о маршруте

`prefers-reduced-motion`

Обновление до v3.0 с v2.x

Обновление с опцией `experimental.viewTransitions`

Удаление флага `experimental.viewTransitions`

Обновление источника импорта

Обновление директив `transition:animate`

Обновление названий событий

Что у вас на уме?

Создать проблему в GitHub

Отправить нам отзыв

Отправить нам отзыв

Анимации переходов

Добавление анимации переходов на страницу

Полноценные переходы между страницами сайта (режим SPA)

Директивы переходов

Именование перехода

Поддержание состояния

transition:persist-props

Встроенные директивы анимации

Настройка анимации

Управление маршрутизатором

Предотвращение навигации на стороне клиента

Навигация по триггерам

Замена записей в истории браузера

Переходы с формами

Резервное управление

Процесс навигации на стороне клиента

Поведение скриптов при анимации переходов

Порядок выполнения скриптов

Повторное выполнение скриптов

data-astro-rerun

События жизненного цикла

astro:before-preparation

astro:after-preparation

astro:before-swap

astro:after-swap

astro:page-load

Доступность

Объявление о маршруте

prefers-reduced-motion

Обновление до v3.0 с v2.x

Обновление с опцией experimental.viewTransitions

Удаление флага experimental.viewTransitions

Обновление источника импорта

Обновление директив transition:animate

Обновление названий событий

`transition:persist-props`

`data-astro-rerun`

`astro:before-preparation`

`astro:after-preparation`

`astro:before-swap`

`astro:after-swap`

`astro:page-load`

`prefers-reduced-motion`

Обновление с опцией `experimental.viewTransitions`

Удаление флага `experimental.viewTransitions`

Обновление директив `transition:animate`