forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
fix: img-viewer transition
+26
-19
+26
-19
src/components/ui/ImageViewer.astro
+26
-19
src/components/ui/ImageViewer.astro
···
15
15
viewerImg.src = src
16
16
viewerImg.alt = alt || ''
17
17
}
18
-
viewer?.classList.add('active')
18
+
// Show visibility first
19
+
viewer!.style.visibility = 'visible'
20
+
void viewer!.offsetWidth
21
+
viewer!.classList.add('active')
19
22
document.body.classList.add('image-viewer-open')
20
23
document.body.style.overflow = 'hidden'
21
24
document.body.dataset.scrollY = window.scrollY.toString()
22
-
if (viewer) {
23
-
viewer.style.cursor = 'auto'
24
-
setTimeout(() => {
25
-
viewer.style.cursor = ''
26
-
}, 10)
27
-
}
25
+
viewer!.style.cursor = 'auto'
26
+
setTimeout(() => {
27
+
viewer!.style.cursor = ''
28
+
}, 10)
28
29
}
29
30
30
31
// Hide the image viewer and restore page scroll
31
32
function hideImage() {
32
-
viewer?.classList.remove('active')
33
+
viewer!.classList.remove('active')
33
34
document.body.classList.remove('image-viewer-open')
34
35
document.body.style.overflow = ''
35
-
setTimeout(() => {
36
-
if (viewer && !viewer.classList.contains('active') && viewerImg) {
36
+
}
37
+
38
+
// Hide and clear image after transition ends
39
+
viewer!.addEventListener('transitionend', (e) => {
40
+
if (e.propertyName === 'opacity' && !viewer!.classList.contains('active')) {
41
+
viewer!.style.visibility = 'hidden'
42
+
if (viewerImg) {
37
43
viewerImg.src = ''
38
44
viewerImg.alt = ''
39
-
viewer.style.cursor = 'auto'
40
-
setTimeout(() => {
41
-
viewer.style.cursor = ''
42
-
}, 10)
43
45
}
44
-
}, 300)
45
-
}
46
+
viewer!.style.cursor = 'auto'
47
+
setTimeout(() => {
48
+
viewer!.style.cursor = ''
49
+
}, 10)
50
+
}
51
+
})
46
52
47
53
// Bind click events to images with data-preview="true" attribute
48
54
function bindImageClickEvents() {
···
87
93
childList: true,
88
94
subtree: true
89
95
})
96
+
97
+
// Hide initially
98
+
viewer!.style.visibility = 'hidden'
90
99
}
91
100
92
101
if (document.readyState === 'loading') {
···
110
119
align-items: center;
111
120
justify-content: center;
112
121
opacity: 0;
113
-
visibility: hidden;
114
-
transition: all 0.15s ease-in-out;
122
+
transition: opacity 0.15s ease-in-out;
115
123
background: color-mix(in srgb, var(--bg) 90%, transparent);
116
124
cursor: zoom-out;
117
125
}
118
126
119
127
.image-viewer.active {
120
128
opacity: 1;
121
-
visibility: visible;
122
129
}
123
130
124
131
.image-viewer img {