Skip to content

Commit a78f809

Browse files
nikoshellnikoshell
committed
Transitions
1 parent 08a0b4c commit a78f809

File tree

4 files changed

+37
-27
lines changed

4 files changed

+37
-27
lines changed

‎src/components/Header.astro‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@ import HeaderLogo from "@components/header/header-logo.astro";
55
import Search from "@components/Search.astro";
66
77
import links from "@data/links.json";
8+
89
---
910

1011
<section
1112
id="navbar"
1213
class="fixed top-0 z-50 transition-transform duration-300 transform-gpu w-full"
14+
transition:name="navbar"
15+
transition:animate="fade"
1316
>
1417
<div
1518
class="container max-w-[1150px] mx-auto px-6 py-2 mt-1 lg:p-2 lg:mt-6 flex items-center justify-between relative z-40 bg-white/80 rounded-full backdrop-blur-md shadow-lg"
@@ -46,42 +49,48 @@ import links from "@data/links.json";
4649
</section>
4750
<Search />
4851

52+
<style>
53+
:root::view-transition-group(navbar) {
54+
z-index: 100;
55+
}
56+
</style>
4957
<script>
50-
document.addEventListener("DOMContentLoaded", function() {
51-
let prevScrollPos = window.scrollY || window.pageYOffset;
58+
document.addEventListener("astro:page-load", () => {
59+
let prevScrollPos = window.pageYOffset;
5260
const navbar = document.getElementById("navbar");
53-
5461
if (!navbar) return;
5562

56-
let ticking = false;
57-
58-
window.addEventListener("scroll", function() {
59-
if (!ticking) {
60-
window.requestAnimationFrame(function() {
61-
let currentScrollPos = window.scrollY || window.pageYOffset;
62-
63-
if (prevScrollPos > currentScrollPos) {
64-
navbar.style.transform = "translateY(0)";
65-
} else {
66-
navbar.style.transform = "translateY(-100%)";
67-
}
68-
69-
prevScrollPos = currentScrollPos;
70-
ticking = false;
71-
});
63+
let isFocused = false;
7264

73-
ticking = true;
65+
window.addEventListener("scroll", () => {
66+
if (isFocused) return; // Don't hide navbar if focused
67+
let currentScrollPos = window.pageYOffset;
68+
if (prevScrollPos > currentScrollPos) {
69+
navbar.style.transform = "translateY(0)";
70+
} else {
71+
navbar.style.transform = "translateY(-100%)";
7472
}
73+
prevScrollPos = currentScrollPos;
7574
});
7675

77-
navbar.addEventListener("focusin", function() {
76+
navbar.addEventListener("focusin", () => {
77+
isFocused = true;
7878
navbar.style.transform = "translateY(0)";
7979
});
8080

81-
navbar.addEventListener("focusout", function() {
82-
if ((window.scrollY || window.pageYOffset) > 100) {
81+
navbar.addEventListener("focusout", () => {
82+
isFocused = false;
83+
if (window.pageYOffset > 100) {
8384
navbar.style.transform = "translateY(-100%)";
8485
}
8586
});
8687
});
88+
89+
document.addEventListener("astro:before-preparation", ()=>{
90+
window.scrollTo({ left: 0, top: 0, behavior: "instant" });
91+
});
92+
93+
document.addEventListener("astro:after-preparation", ()=>{
94+
window.scrollTo({ left: 0, top: 0, behavior: "instant" });
95+
});
8796
</script>

‎src/layouts/Layout.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ throw new Error(`${Astro.url.pathname} Both 'title' and 'description' must be se
2020
}
2121
2222
const externalDomain = new URL(Astro.site || "").hostname;
23+
2324
---
2425

2526
<!DOCTYPE html>

‎src/pages/schedule.astro‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@ const days = await getCollection("days");
2727
))
2828
}
2929
</Layout>
30-
<script>
31-
window.addEventListener('load', function() {
30+
<script is:inline data-astro-rerun>
3231
function checkForAnchorAndHighlight() {
3332
const currentAnchor = window.location.hash.substring(1);
3433

@@ -38,7 +37,7 @@ window.addEventListener('load', function() {
3837
const targetH2 = allMatching[allMatching.length - 1];
3938

4039
if (targetH2) {
41-
const parentElement: any = targetH2.parentElement;
40+
const parentElement = targetH2.parentElement;
4241

4342
if (parentElement) {
4443
const originalBorder = parentElement.style.border;
@@ -86,5 +85,4 @@ window.addEventListener('load', function() {
8685
checkForAnchorAndHighlight();
8786

8887
window.addEventListener('hashchange', checkForAnchorAndHighlight);
89-
});
9088
</script>

‎src/pages/session/[slug].astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,8 @@ const nextSessionsOrdered = sameRoomNextSession
162162
height={400}
163163
width={600}
164164
class="w-full max-w-[240px] sm:max-w-[540px] xl:max-w-[720px] max-h-[240px] sm:max-h-[540px] xl:max-h-[720px] object-scale-down"
165+
transition:animate="fade"
166+
transition:name=`speaker-${speaker.data.code}`
165167
/>
166168
</div>
167169
</div>

0 commit comments

Comments
 (0)