michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix flickering during view transitions (#8772)

Browse source 
* Fix for #8711

* more descriptive changeset

* chores, while we are at it ...
This commit is contained in:
Martin Trapp 2023-10-09 16:15:23 +02:00 committed by GitHub
parent 33d0be50be
commit c24f70d916
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 83 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/seven-seas-hide.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix flickering during view transitions

34
packages/astro/e2e/fixtures/view-transitions/src/components/listener-layout.astro Normal file
View file

@ -0,0 +1,34 @@
---
import { ViewTransitions } from 'astro:transitions';
---
<html>
<head>
<ViewTransitions/>
</head>
<body>
<p>Local transitions</p>
<slot/>
<script>
document.addEventListener("astro:after-swap", () => {
document.querySelector("p").addEventListener("transitionstart", () => {
console.info("transitionstart");
});
document.documentElement.setAttribute("class", "blue");
});
document.dispatchEvent(new Event("astro:after-swap"));
</script>
</body>
<style>
p {
transition: background-color 1s;
}
p {
background-color: #0ee;
color: red;
}
.blue p {
background-color: #ee0;
color: blue;
}
</style>
</html>

6
packages/astro/e2e/fixtures/view-transitions/src/pages/listener-one.astro Normal file
View file

@ -0,0 +1,6 @@
---
import ListenerLayout from '../components/listener-layout.astro';
---
<ListenerLayout>
<a id="totwo" href="/listener-two">Go to listener two</a>
</ListenerLayout>

6
packages/astro/e2e/fixtures/view-transitions/src/pages/listener-two.astro Normal file
View file

@ -0,0 +1,6 @@
---
import ListenerLayout from '../components/listener-layout.astro';
---
<ListenerLayout>
<a id="toone" href="/listener-one">Go to listener one</a>
</ListenerLayout>

22
packages/astro/e2e/view-transitions.test.js
View file

@ -230,6 +230,28 @@ test.describe('View Transitions', () => {
await expect(h, 'imported CSS updated').toHaveCSS('background-color', 'rgba(0, 0, 0, 0)'); await expect(h, 'imported CSS updated').toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
}); });
test('No page rendering during swap()', async ({ page, astro }) => {
let transitions = 0;
page.on('console', (msg) => {
if (msg.type() === 'info' && msg.text() === 'transitionstart') ++transitions;
});
// Go to page 1
await page.goto(astro.resolveUrl('/listener-one'));
let p = page.locator('#totwo');
await expect(p, 'should have content').toHaveText('Go to listener two');
// on load a CSS transition is started triggered by a class on the html element
expect(transitions).toEqual(1);
// go to page 2
await page.click('#totwo');
p = page.locator('#toone');
await expect(p, 'should have content').toHaveText('Go to listener one');
// swap() resets that class, the after-swap listener sets it again.
// the temporarily missing class must not trigger page rendering
expect(transitions).toEqual(1);
});
test('click hash links does not do navigation', async ({ page, astro }) => { test('click hash links does not do navigation', async ({ page, astro }) => {
// Go to page 1 // Go to page 1
await page.goto(astro.resolveUrl('/one')); await page.goto(astro.resolveUrl('/one'));

12
packages/astro/src/transitions/router.ts
View file

@ -146,18 +146,24 @@ function isInfinite(animation: Animation) {
const updateHistoryAndScrollPosition = (toLocation: URL, replace: boolean, intraPage: boolean) => { const updateHistoryAndScrollPosition = (toLocation: URL, replace: boolean, intraPage: boolean) => {
const fresh = !samePage(toLocation); const fresh = !samePage(toLocation);
let scrolledToTop = false;
if (toLocation.href !== location.href) { if (toLocation.href !== location.href) {
if (replace) { if (replace) {
history.replaceState({ ...history.state }, '', toLocation.href); history.replaceState({ ...history.state }, '', toLocation.href);
} else { } else {
history.replaceState({ ...history.state, intraPage }, ''); history.replaceState({ ...history.state, intraPage }, '');
history.pushState({ index: ++currentHistoryIndex, scrollX, scrollY }, '', toLocation.href); history.pushState(
{ index: ++currentHistoryIndex, scrollX: 0, scrollY: 0 },
'',
toLocation.href
);
} }
// now we are on the new page for non-history navigations! // now we are on the new page for non-history navigations!
// (with history navigation page change happens before popstate is fired) // (with history navigation page change happens before popstate is fired)
// freshly loaded pages start from the top // freshly loaded pages start from the top
if (fresh) { if (fresh) {
scrollTo({ left: 0, top: 0, behavior: 'instant' }); scrollTo({ left: 0, top: 0, behavior: 'instant' });
scrolledToTop = true;
} }
} }
if (toLocation.hash) { if (toLocation.hash) {
@ -166,7 +172,9 @@ const updateHistoryAndScrollPosition = (toLocation: URL, replace: boolean, intra
// that won't reload the page but instead scroll to the fragment // that won't reload the page but instead scroll to the fragment
location.href = toLocation.href; location.href = toLocation.href;
} else { } else {
scrollTo({ left: 0, top: 0, behavior: 'instant' }); if (!scrolledToTop) {
scrollTo({ left: 0, top: 0, behavior: 'instant' });
}
} }
}; };