Анимации переходов
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>
на каждой нужной странице.
Полноценные переходы между страницами сайта (режим SPA)
Заголовок раздела Полноценные переходы между страницами сайта (режим SPA)Импортируйте и добавьте компонент <ViewTransitions />
в общий компонент <head>
или общий компонент макета. Astro создаст анимацию страницы по умолчанию, основываясь на сходстве между старой и новой страницами, а также обеспечит обратное поведение для неподдерживаемых браузеров.
В приведённом ниже примере показано добавление анимации навигации по страницам, используемой Astro по умолчанию для всего сайта, включая вариант управления по умолчанию для неподдерживающих браузеров, путём импорта и добавления этого компонента в компонент <CommonHead />
Astro:
Для включения навигации 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
.
Обратите внимание, что предоставленное значение transition:name
может быть использовано только один раз на каждой странице. Установите этот параметр вручную, если Astro не может самостоятельно определить правильное имя, или для более тонкого контроля над сопоставлением элементов.
Поддержание состояния
Заголовок раздела Поддержание состояния
Добавлено в:
astro@2.10.0
Можно сохранять компоненты и HTML-элементы (вместо того, чтобы заменять их) при переходе по странице с помощью директивы transition:persist
.
Например, следующее <video>
будет продолжать воспроизводиться при переходе на другую страницу, содержащую тот же видеоэлемент. Это работает как при навигации вперёд, так и назад.
Вы также можете поместить директиву на остров Astro (компонент UI-фреймворка с директивой client:
). Если этот компонент существует на следующей странице, остров со старой страницы с его текущим состоянием будет продолжать отображаться, а не заменяться островом с новой страницы.
В приведённом ниже примере внутреннее состояние счётчика компонента не будет сбрасываться при переходе туда и обратно по страницам, содержащим компонент <Counter />
с атрибутом transition:persist
.
Не все состояния можно сохранить таким образом. Перезапуск CSS-анимации и перезагрузка фреймов не могут быть предотвращены при переходе между представлениями даже при использовании transition:persist
.
Вы также можете вручную идентифицировать соответствующие элементы, если остров/элемент находится в другом компоненте между двумя страницами.
В качестве удобного сокращения transition:persist
также может принимать в качестве значения имя перехода.
transition:persist-props
Заголовок раздела transition:persist-props
Добавлено в:
astro@4.5.0
Это позволяет вам контролировать, должны ли входные данные (пропсы) острова сохраняться при навигации.
По умолчанию, когда вы добавляете transition:persist
к острову, состояние сохраняется при навигации, но ваш компонент будет повторно отображаться с новыми входными данными. Это полезно, например, когда компонент получает свойства, специфичные для страницы, такие как заголовок текущей страницы.
Вы можете переопределить это поведение с помощью transition:persist-props
. Добавление этой директивы сохранит существующие пропсы острова (без повторной визуализации с новыми значениями) в дополнение к сохранению существующего состояния.
Встроенные директивы анимации
Заголовок раздела Встроенные директивы анимацииAstro поставляется с несколькими встроенными анимациями, позволяющими переопределить переход fade
по умолчанию. Добавьте директиву «transition:animate
» к отдельным элементам, чтобы настроить поведение определённых переходов.
fade
(по умолчанию): Упрямая анимация с плавным затуханием. Старый контент исчезает, а новый появляется.initial
: Откажитесь от самоуверенной анимации плавного затухания Astro и используйте стиль браузера по умолчанию.slide
: Анимация, в которой старый контент выдвигается слева, а новый — справа. При обратной навигации анимация противоположная.none
: Отключите анимацию браузера по умолчанию. Используйте в элементе<html>
страницы, чтобы отключить затухание по умолчанию для каждого элемента на странице.
Комбинируйте директивы для полного контроля над анимацией вашей страницы. Установите значение страницы по умолчанию для элемента <html>
и переопределите его для любых отдельных элементов по желанию.
В приведённом ниже примере создается слайд-анимация для основного содержимого при отключении анимации затухания браузера по умолчанию для остальной части страницы:
Настройка анимации
Заголовок раздела Настройка анимацииМожно настроить все аспекты перехода с помощью любых свойств анимации CSS.
Чтобы настроить встроенную анимацию, сначала импортируйте её из astro:transitions
, а затем передайте параметры настройки.
В приведённом ниже примере настраивается длительность встроенной анимации fade
:
Вы также можете определить собственные анимации для использования с transition:animate
, задав поведение вперёд и назад, а также новые и старые страницы в соответствии со следующими типами:
В следующем примере показаны все необходимые свойства для определения пользовательской анимации fade
:
Управление маршрутизатором
Заголовок раздела Управление маршрутизаторомМаршрутизатор <ViewTransitions />
обрабатывает навигацию, прослушивая:
- Клики по элементам
<a>
. - События навигации назад и вперёд.
Следующие опции позволяют дополнительно контролировать процесс навигации в маршрутизаторе:
data-astro-reload
: Атрибут тега<a>
для принудительной полностраничной навигацииdata-astro-history="auto | push | replace"
: атрибут тега<a>
для управления историей браузераnavigate(href, options)
: метод, доступный любому клиентскому скрипту или клиентскому компоненту для запуска навигации
Предотвращение навигации на стороне клиента
Заголовок раздела Предотвращение навигации на стороне клиентаВ некоторых случаях навигация с помощью маршрутизации на стороне клиента невозможна, поскольку обе страницы должны использовать маршрутизатор <ViewTransitions />
, чтобы предотвратить перезагрузку всей страницы. Возможно, вам также не нужна маршрутизация на стороне клиента при каждом изменении навигации, и вы предпочтёте традиционную постраничную навигацию по выбранным маршрутам.
Вы можете отказаться от маршрутизации на стороне клиента для каждой ссылки, добавив атрибут data-astro-reload
к любому тегу <a>
или <form>
. Этот атрибут отменяет все существующие компоненты <ViewTransitions />
и вместо этого запускает обновление браузера во время навигации.
В следующем примере показано предотвращение маршрутизации на стороне клиента при переходе к статье только с главной страницы. Это всё ещё позволяет использовать анимацию на общих элементах, таких как изображение героя, при переходе на ту же страницу со страницы листинга статей:
Ссылки с атрибутом data-astro-reload
будут проигнорированы маршрутизатором, и произойдёт полностраничная навигация.
Навигация по триггерам
Заголовок раздела Навигация по триггерамВы также можете запускать навигацию на стороне клиента по событиям, которые обычно не прослушиваются маршрутизатором <ViewTransitions />
, используя navigate
. Эта функция из модуля astro:transitions/client
может использоваться в скриптах, а также в компонентах фреймворка, которые гидратированы с помощью директивы client.
В следующем примере показан компонент Astro, который переводит посетителя на другую страницу, выбранную им из меню:
Следующий пример реализует то же самое с помощью navigate()
в компоненте React <Form />
:
Компонент <Form />
может быть отображен на странице Astro, использующей маршрутизатор <ViewTransitions />
, с помощью директивы client
:
Метод 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
) и перезаписывает её.
В результате, если вы вернетесь со страницы /main
, браузер отобразит не страницу /confirmation
, а страницу перед ней.
Переходы с формами
Заголовок раздела Переходы с формами
Добавлено в:
astro@4.0.0
Маршрутизатор <ViewTransitions />
запускает внутристраничные переходы из элементов <form>
, поддерживая как GET
, так и POST
запросы.
По умолчанию Astro отправляет данные формы в формате multipart/form-data
, когда атрибут method
имеет значение POST
. Если вы хотите соответствовать стандартному поведению веб-браузеров, используйте атрибут enctype
для отправки данных в кодировке application/x-www-form-urlencoded
:
Можно отказаться от переходов маршрутизатора на любой отдельной форме с помощью атрибута data-astro-reload
:
Резервное управление
Заголовок раздела Резервное управлениеМаршрутизатор <ViewTransitions />
лучше всего работает в браузерах, поддерживающих View Transitions (браузеры на базе Chromium), но также включает в себя поддержку поведения по умолчанию для других браузеров. Даже если браузер не поддерживает API View Transitions, Astro всё равно обеспечит внутрибраузерную навигацию с помощью одного из запасных вариантов для сопоставимого опыта.
Можно переопределить оддержку поведения по умолчанию в Astro, добавив свойство fallback
для компонента <ViewTransitions />
и установив для него значение swap
или none
:
animate
(по умолчанию, рекомендуется) - перед обновлением содержимого страницы Astro будет имитировать анимацию переходов с помощью пользовательских атрибутов.swap
- Astro не будет пытаться анимировать страницу. Вместо этого старая страница будет немедленно заменена новой.none
- Astro не будет делать никаких анимированных переходов между страницами. Вместо этого вы получите полностраничную навигацию в неподдерживающих браузерах.
Браузерная анимация initial
не имитируется Astro. Таким образом, любой элемент, использующий эту анимацию, в данный момент не будет анимирован.
Процесс навигации на стороне клиента
Заголовок раздела Процесс навигации на стороне клиентаПри использовании маршрутизатора <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
Заголовок раздела data-astro-rerun
Добавлено в:
astro@4.5.0
Чтобы заставить встроенные скрипты повторно выполняться после каждого перехода, добавьте свойство data-astro-rerun
. Добавление любого атрибута к скрипту также неявно добавляет is:inline
, поэтому это доступно только для скриптов, которые не собираются и не обрабатываются Astro.
Чтобы скрипт запускался каждый раз при загрузке страницы во время навигации на стороне клиента, он должен выполняться по событию жизненного цикла. Например, слушатели событий для DOMContentLoaded
могут быть заменены событием жизненного цикла astro:page-load
.
Если у вас есть код, который устанавливает глобальное состояние во встроенном скрипте, это состояние должно учитывать, что скрипт может выполняться более одного раза. Проверьте глобальное состояние в теге <script>
и по возможности выполняйте код условно. Это работает, потому что window
сохраняется.
Пример обновления существующих скриптов в проекте смотрите в учебнике Дополнить с анимациями переходов.
События жизненного цикла
Заголовок раздела События жизненного циклаМаршрутизатор <ViewTransition />
вызывает ряд событий на документе
во время навигации. Эти события позволяют подключаться к жизненному циклу навигации, чтобы показывать индикаторы загрузки новой страницы, переопределять поведение по умолчанию и восстанавливать состояние по завершении навигации.
Процесс навигации включает в себя фазу подготовки, когда загружается новый контент; этап DOM swap, на котором содержимое старой страницы заменяется содержимым новой; и фаза завершения, на которой выполняются скрипты, сообщается о завершении загрузки и выполняется очистка.
События жизненного цикла API View Transition от Astro расположены в следующем порядке:
События before-
позволяют вам влиять на действия, которые должны произойти, и изменять их, а события after-
— это уведомления о завершении этапа.
Хотя некоторые действия могут быть вызваны во время любого события, некоторые задачи могут быть выполнены только во время определённого события для достижения наилучших результатов, например, отображение загрузочного спиннера перед подготовкой или переопределение пар анимации перед сменой содержимого.
astro:before-preparation
Заголовок раздела astro:before-preparation
Добавлено в:
astro@3.6.0
Событие, которое возникает в начале фазы подготовки, после начала навигации (например, после того, как пользователь перешёл по ссылке), но до загрузки контента.
Это событие используется:
- Выполнение действий до начала загрузки, например, показ спиннера загрузки.
- Чтобы изменить загрузку, например, загрузить содержимое, заданное в шаблоне, а не из внешнего URL.
- Чтобы изменить
направление
навигации (обычно либовперёд
, либоназад
) для пользовательской анимации.
Вот пример использования события astro:before-preparation
для загрузки спиннера до загрузки контента и его остановки сразу после загрузки. Обратите внимание, что использование обратного вызова загрузчика таким образом позволяет выполнять код асинхронно.
astro:after-preparation
Заголовок раздела astro:after-preparation
Добавлено в:
astro@3.6.0
Событие, которое срабатывает в конце фазы подготовки, после того как содержимое новой страницы было загружено и разобрано в документ. Это событие происходит перед фазой перехода к просмотру.
В этом примере используется событие astro:before-preparation
для запуска индикатора загрузки и событие astro:after-preparation
для его остановки:
Это более простой вариант загрузки спиннера, чем пример, показанный выше: если весь код слушателя может быть выполнен синхронно, нет необходимости подключаться к обратному вызову загрузчика.
astro:before-swap
Заголовок раздела astro:before-swap
Добавлено в:
astro@3.6.0
Событие, которое срабатывает перед тем, как новый документ (который заполняется во время фазы подготовки) заменит текущий документ. Это событие происходит внутри перехода, когда пользователь всё ещё видит снимок старой страницы.
Это событие можно использовать для внесения изменений до того, как произойдет подмена. Свойство newDocument
этого события представляет входящий документ. Вот пример того, как обеспечить перенос предпочтений светлого или тёмного режима браузера в localStorage
на новую страницу:
Событие astro:before-swap
также может быть использовано для изменения реализации подкачки. Реализация подкачки по умолчанию различает содержимое заголовка, перемещает постоянные элементы из старого документа в newDocument
, а затем заменяет весь body
телом нового документа.
На этом этапе жизненного цикла вы можете определить свою собственную реализацию подкачки, например, диффундировать всё содержимое существующего документа (что делают некоторые другие маршрутизаторы):
astro:after-swap
Заголовок раздела astro:after-swapСобытие, которое срабатывает сразу после того, как новая страница заменит старую. Можно прослушать это событие на document
и запустить действия, которые произойдут перед отрисовкой элементов DOM новой страницы и запуском скриптов.
Это событие, прослушиваемое на исходящей странице, полезно для передачи и восстановления любого состояния DOM, которое должно быть перенесено на новую страницу.
Это последний момент в жизненном цикле, когда ещё безопасно, например, добавить имя класса тёмного режима (<html class="dark-mode">
), хотя вы можете захотеть сделать это в более раннем событии.
Событие astro:after-swap
происходит сразу после обновления истории браузера и установки позиции прокрутки.
Поэтому одним из вариантов использования этого события является отмена восстановления прокрутки по умолчанию для навигации по истории. В следующем примере для каждой навигации горизонтальная и вертикальная прокрутка устанавливается в левый верхний угол страницы.
astro:page-load
Заголовок раздела astro:page-loadСобытие, которое срабатывает в конце навигации по странице, после того как новая страница становится видимой для пользователя и загружаются блокирующие стили и скрипты. Вы можете прослушать это событие на document
.
Компонент <ViewTransitions />
вызывает это событие как при начальном переходе по странице с предварительной отрисовкой, так и при любом последующем переходе, как вперёд, так и назад.
Можно использовать это событие для запуска кода при каждой навигации по странице или только единожды:
Доступность
Заголовок раздела ДоступностьВключение маршрутизации на стороне клиента и анимирование переходов между страницами сопряжены с проблемами доступности, и Astro стремится сделать сайты с поддержкой View Transitions максимально доступными по умолчанию.
Объявление о маршруте
Заголовок раздела Объявление о маршруте
Добавлено в:
astro@3.2.0
Компонент <ViewTransitions />
включает в себя анонс маршрута для навигации по странице во время маршрутизации на стороне клиента. Для этого не требуется никаких настроек или действий.
Вспомогательные технологии дают посетителям понять, что страница изменилась, объявляя после навигации новый заголовок страницы. При использовании маршрутизации на стороне сервера с традиционным полностраничным обновлением браузера это происходит по умолчанию после загрузки новой страницы. При маршрутизации на стороне клиента это действие выполняет компонент <ViewTransitions />
.
Чтобы добавить анонс маршрута в маршрутизацию на стороне клиента, компонент добавляет элемент на новую страницу с атрибутом aria-live
, установленным на assertive
. Это указывает вспомогательным технологиям на необходимость немедленного объявления. Для определения текста объявления компонент также проверяет наличие следующих пунктов (в порядке приоритета):
- Заголовок
<title>
, если он существует. - Первый
<h1>
, который он найдет. - Имя страницы.
Мы настоятельно рекомендуем всегда включать <title>
в каждую страницу для обеспечения доступности.
prefers-reduced-motion
Заголовок раздела prefers-reduced-motionКомпонент Astro <ViewTransitions />
включает медиазапрос CSS, который отключает все анимации переходов, включая анимацию возврата, при обнаружении параметра prefer-reduced-motion
. Вместо этого браузер просто поменяет местами элементы DOM без анимации.
Обновление до v3.0 с v2.x
Заголовок раздела Обновление до v3.0 с v2.xВ Astro v3.0 анимации переходов больше не находятся под экспериментальным флагом.
Если вы не включили этот экспериментальный флаг в Astro 2.x, это не приведёт к каким-либо изменениям в вашем проекте. Новый API View Transitions не влияет на существующий код.
Если вы ранее использовали экспериментальные анимации переходов, то при обновлении проекта Astro с предыдущей версии могут произойти некоторые изменения.
Следуйте приведённым ниже инструкциям для обновления проекта Astro v2.x с опцией experimental.viewTransitions: true
до v3.0.
Обновление с опцией experimental.viewTransitions
Заголовок раздела Обновление с опцией experimental.viewTransitionsЕсли вы ранее включили экспериментальный флаг для анимации переходов, вам нужно будет обновить проект до версии Astro 3.0, которая теперь позволяет такие переходы по умолчанию.
Удаление флага experimental.viewTransitions
Заголовок раздела Удаление флага experimental.viewTransitionsСнимите флаг experimental
:
Обновление источника импорта
Заголовок раздела Обновление источника импортаКомпонент <ViewTransitions />
был перемещен из astro:components
в astro:transitions
. Обновите источник импорта для всех вхождений в проекте.
Обновление директив transition:animate
Заголовок раздела Обновление директив transition:animateИзменено: Значение morph
параметра transition:animate
было переименовано в initial
. Кроме того, эта анимация больше не используется по умолчанию. Если директива transition:animate
не указана, анимация теперь будет по умолчанию fade
.
-
Переименуйте все анимации
morph
вinitial
. -
Чтобы сохранить все анимации, которые ранее использовали
morph
по умолчанию, явно добавьтеtransition:animate="initial"
. -
Вы можете смело удалить все анимации, явно установленные на
fade
. Теперь это поведение по умолчанию:
Добавлено: Astro также поддерживает новое значение none
для параметра transition:animate
. Это значение можно использовать в элементе <html>
страницы, чтобы отключить анимированные полностраничные переходы на всей странице. Это отменяет поведение анимации по умолчанию только для элементов страницы без директивы анимации. Вы по-прежнему можете задавать анимацию для отдельных элементов, и эти анимации будут происходить.
-
Теперь вы можете отключить все переходы по умолчанию на отдельной странице, анимируя только те элементы, которые явно используют директиву
transition:animate
:
Обновление названий событий
Заголовок раздела Обновление названий событийСобытие astro:load
было переименовано в astro:page-load
. Переименуйте все вхождения в вашем проекте.
Событие astro:beforeload
было переименовано в astro:after-swap
. Переименуйте все вхождения в вашем проекте.