diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
index 85bf9928fad8..a079966572fc 100644
--- a/packages/astro/components/ViewTransitions.astro
+++ b/packages/astro/components/ViewTransitions.astro
@@ -17,7 +17,7 @@ const { fallback = 'animate' } = Astro.props as Props;
index: number;
scrollY: number;
};
- type Events = 'astro:pageload' | 'astro:afterswap';
+ type Events = 'astro:page-load' | 'astro:after-swap';
const persistState = (state: State) => history.replaceState(state, '');
@@ -33,7 +33,7 @@ const { fallback = 'animate' } = Astro.props as Props;
const transitionEnabledOnThisPage = () =>
!!document.querySelector('[name="astro-view-transitions-enabled"]');
const triggerEvent = (name: Events) => document.dispatchEvent(new Event(name));
- const onPageLoad = () => triggerEvent('astro:pageload');
+ const onPageLoad = () => triggerEvent('astro:page-load');
const PERSIST_ATTR = 'data-astro-transition-persist';
const throttle = (cb: (...args: any[]) => any, delay: number) => {
@@ -175,7 +175,7 @@ const { fallback = 'animate' } = Astro.props as Props;
persistState(state);
}
- triggerEvent('astro:afterswap');
+ triggerEvent('astro:after-swap');
};
// Wait on links to finish, to prevent FOUC
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/DarkMode.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/DarkMode.astro
index bc49ce28d8f1..39cb4b9527a7 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/components/DarkMode.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/components/DarkMode.astro
@@ -6,7 +6,7 @@
}
toggle();
- document.addEventListener('astro:afterswap', () => {
+ document.addEventListener('astro:after-swap', () => {
toggle();
})
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/two.astro
index 84b16f2596b1..af67edbd5593 100644
--- a/packages/astro/e2e/fixtures/view-transitions/src/pages/two.astro
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/two.astro
@@ -6,7 +6,7 @@ import Layout from '../components/Layout.astro';
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index d6135dd62e25..04d31919e26e 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -147,7 +147,7 @@ test.describe('View Transitions', () => {
await expect(p, 'imported CSS updated').toHaveCSS('font-size', '24px');
});
- test('astro:load event fires when navigating to new page', async ({ page, astro }) => {
+ test('astro:page-load event fires when navigating to new page', async ({ page, astro }) => {
// Go to page 1
await page.goto(astro.resolveUrl('/one'));
const p = page.locator('#one');
@@ -159,14 +159,14 @@ test.describe('View Transitions', () => {
await expect(article, 'should have script content').toHaveText('works');
});
- test('astro:load event fires when navigating directly to a page', async ({ page, astro }) => {
+ test('astro:page-load event fires when navigating directly to a page', async ({ page, astro }) => {
// Go to page 2
await page.goto(astro.resolveUrl('/two'));
const article = page.locator('#twoarticle');
await expect(article, 'should have script content').toHaveText('works');
});
- test('astro:afterswap event fires right after the swap', async ({ page, astro }) => {
+ test('astro:after-swap event fires right after the swap', async ({ page, astro }) => {
// Go to page 1
await page.goto(astro.resolveUrl('/one'));
let p = page.locator('#one');