astro vtbot

Нет, это не робот?, Это? B AG O F T RICKS!

️ Звезда, чтобы поддержать эту работу

Мешок уловок для просмотра Астро.

Мешок с трюками обеспечивает расширения и поддержку вокруг переходов Astro.

Текущее развертывание технических демонстраций и документацию можно найти по адресу https://events-3bg.pages.dev/

!!! Новые уловки в сумке? !!!

Приносит вам последнюю версию @vtbag/ulement-crossing, с исправлением ошибки для того, чтобы допустить свойства data-* переходить на новую страницу!

Для получения подробной информации см. Чангейлог сценаризации элемента.

Недавно выучили хитрости

Инспекционная камера Devtools теперь работает для проектов pnpm !
Большой крик и "Спасибо!" Лукасу за то, что это исправление!

Новый компонент для браузера-ненужных переходов просмотров: компонент <CamShaft> предотвращает эффект псевдо-гладкого прокрутки, вызванный групп перехода просмотра, которые превышают высоту видового порта при перемещении в другую позицию вертикальной прокрутки.

<TurnSignal> позволяет Astro вперед/обратная анимация, предоставляемые transition:animate для работы с нативным перекрестным документом @view-transition{} . При желании вы можете настроить компонент с общим порядком страниц вашего сайта, что позволяет автоматически обнаружить направление перехода.

<ElementCrossing /> -компонент для тех из вас, кто экспериментирует с переходом с переходом только для CSS, и пропускает способ сохранить состояние HTML-элементов через навигацию: передача выбранного состояния элемента на другую сторону!

Инспекционная камера: см. В вашем представлении переходы, как никогда раньше: изучить каждую деталь, раскрыть, отлаживать и оптимизировать! Теперь сверните в последствия каждого псевдоэлемента, введенного в соответствии с API View Transition и даже выборочно переключайте отдельные анимации, чтобы лучше понять, что происходит! Приведите инспекционную камеру в качестве компонента (<InspectionChamber />) или установите сумку в качестве интеграции! и получить доступ к камере из Devtoolbar !

Поддержка Starlight: Вы когда -нибудь хотели посмотреть, как выглядит ваш сайт Starlight с включенными переходами просмотра? Следуйте этим шагам, чтобы избавиться от полных страниц и сделать ваш сайт Starlight похожим на спа -салон!

Многоразовые компоненты?

• Нуждающиеся в расширениях для просмотра переходов, потому что у вас есть проблемы с iframes на ваших страницах?
• Хотите поддержки в понимании и отладке просмотра переходов или просто хотите вторую пару глаз? В вашем просмотре настройки перехода?
• Ищете многоразовые анимации или специальные эффекты перехода?
• Хотите использовать просмотр переходов на вашем сайте Starlight?

Пакет astro-vtbot не монолитная библиотека. Используйте необходимые вам компоненты, и заплатите только пропускную способность для них.

Компонент	Бротли байты добавлены
Анимационный стиль	~ 0,1K
Autonameseled?	~ 0,3к
BorderControl?	~ 0,1K
Тормозная палата?	~ 0,2K
Распределительный вал?	~ 0,6K
Элементный скрещивание?	~ 1,2k
InspectionChamber?	~ 27K
Линтер?	~ 1,9k
Загрузка ⏳	~ 0,4K
Двигаться ?	~ 0,2K
Noscroll	~ 0,1K
PageOffset? ⇞	~ 0,1K
Поэверноневигация?	~ 0,1K
Портал?	~ 0,2K
Spectedswapp ↹	~ 0,5K
Звездный свет ...?	~ 3,0k
Смена?	-0.3k
Качать ?	~ 0,1K
Поворотный?	~ 0,5K
Vtbotdebug?	~ 2,8k
Увеличить?	~ 0,1K

Посетите документацию многоразовых компонентов для подробной информации.

• <Linter/> : компонент Linter, который помогает вам определить проблемы при настройке переходов.

• <VtBotDebug/> : компонент отладки, который регистрирует события и их данные по мере их возникновения.

• <ReplacementSwap/> : альтернативный DOM Swap (), который сохраняет элементы в исходном DOM, чтобы избежать повторной ренициализации IFRAMES или CSS -анимации.

• <LoadIndicator> : Вы когда -нибудь пропустили визуальную обратную связь на сайтах с переходами просмотра относительно того, заметило ли приложение щелчок? Вам нужен индикатор загрузки! Ну вот!

• Zoom , <Move> и Swing -анимацию и компонент <AnimationsStyle/> позволяет расширенные параметры стиля.

• <Portal/> компонент, который заставляет все просмотреть переходы через страницу портала/загрузки.

• <NoScroll/> Держите текущую вертикальную и горизонтальную позицию прокрутки при переходе на следующую страницу.

Технологические демо

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

Источники в этом репозитории.

Жаттер?

И последнее, но не менее важное: развертывание также включает в себя ▶ Jotter ◀ с богатой информацией о событиях перехода, а также справочной информации и ценными советами и хитростями, находящимися в виде переходов в Astro.

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

Поиск неисправностей

Для получения помощи, ознакомьтесь с вкладкой Discussions на GitHub Repo.

Внося

Этот пакет поддерживается Martrapp независимо от Astro. Вы можете внести свой вклад, отправив проблему или открыв PR!

Изменение

См. Changelog.md для истории изменений в этом пакете.