Fork of Chiri for Astro for my blog
chore(ui): tweak transitioninit
+34
-9
+4
src/components/layout/TransitionWrapper.astro
+4
src/components/layout/TransitionWrapper.astro
···
33
33
::view-transition-new(page-content) {
34
34
opacity: 0;
35
35
animation: fade-in 0.4s ease 0.2s forwards;
36
+
will-change: filter, opacity, transform;
36
37
}
37
38
}
38
39
}
···
50
51
0% {
51
52
opacity: 0;
52
53
filter: blur(8px);
54
+
transform: translateZ(0);
53
55
}
54
56
30% {
55
57
opacity: 0.5;
56
58
filter: blur(4px);
59
+
transform: translateZ(0);
57
60
}
58
61
100% {
59
62
opacity: 1;
60
63
filter: blur(0);
64
+
transform: translateZ(0);
61
65
}
62
66
}
63
67
+30
-9
src/components/ui/TransitionInit.astro
+30
-9
src/components/ui/TransitionInit.astro
···
108
108
initAll(document, true)
109
109
})
110
110
111
-
// Fallback: periodic check for the first few seconds
112
-
let checkCount = 0
113
-
const intervalCheck = setInterval(() => {
114
-
if (checkCount >= 5) {
115
-
clearInterval(intervalCheck)
111
+
// Fallback: periodic check using requestIdleCallback with timeout-based control
112
+
const startTime = Date.now()
113
+
const timeoutDuration = 3000 // 3 seconds timeout
114
+
let idleCallbackId = null
115
+
116
+
function scheduleNextCheck() {
117
+
const elapsed = Date.now() - startTime
118
+
119
+
if (elapsed >= timeoutDuration) {
116
120
return
117
121
}
118
122
119
-
checkCount++
120
123
initAll(document, true)
121
-
}, 500)
124
+
125
+
// Schedule next check using requestIdleCallback if available, otherwise use requestAnimationFrame
126
+
if ('requestIdleCallback' in window) {
127
+
idleCallbackId = requestIdleCallback(scheduleNextCheck, { timeout: 1000 })
128
+
} else {
129
+
idleCallbackId = requestAnimationFrame(() => {
130
+
setTimeout(scheduleNextCheck, 500)
131
+
})
132
+
}
133
+
}
122
134
123
-
// Clean up interval when page unloads
135
+
// Start the fallback checks
136
+
scheduleNextCheck()
137
+
138
+
// Clean up when page unloads
124
139
window.addEventListener('beforeunload', () => {
125
-
clearInterval(intervalCheck)
140
+
if (idleCallbackId) {
141
+
if ('requestIdleCallback' in window) {
142
+
cancelIdleCallback(idleCallbackId)
143
+
} else {
144
+
cancelAnimationFrame(idleCallbackId)
145
+
}
146
+
}
126
147
})
127
148
})()
128
149
</script>