From f3dcca2d3120a3c54c5bc2f83cb7be0859d7d91c Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 10 Jul 2026 15:12:00 +0900
Subject: [PATCH] wip

---
 .../src/components/MkImageGallery.item.vue       |  1 +
 .../frontend/src/components/MkImageGallery.vue   | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkImageGallery.item.vue b/packages/frontend/src/components/MkImageGallery.item.vue
index c4796cbfca..5a2a01eb1b 100644
--- a/packages/frontend/src/components/MkImageGallery.item.vue
+++ b/packages/frontend/src/components/MkImageGallery.item.vue
@@ -390,6 +390,7 @@ onBeforeUnmount(() => {
 
 watch(thumbnailImageLoaded, () => {
 	if (props.image.sourceElement != null && props.activated) {
+		props.image.sourceElement.style.visibility = 'hidden';
 		enableTransition.value = true;
 		rootEl.value.offsetHeight; // reflow
 		transform.value.x = 0;
diff --git a/packages/frontend/src/components/MkImageGallery.vue b/packages/frontend/src/components/MkImageGallery.vue
index cd602051ed..02e9704d6a 100644
--- a/packages/frontend/src/components/MkImageGallery.vue
+++ b/packages/frontend/src/components/MkImageGallery.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:leaveToClass="prefer.s.animation ? $style.transition_root_leaveTo : ''"
 	:duration="{ enter: prefer.s.animation ? openAnimDuration : 0, leave: prefer.s.animation ? closeAnimDuration : 0 }"
 	appear
-	@afterLeave="emit('closed')"
+	@afterLeave="onAfterLeave"
 >
 	<!-- v-ifを使うとfalseになったとき(transitionが行われている間)子コンポーネントの更新が停止するのか子コンポーネントがアニメーションされなくなる -->
 	<div v-show="showing" ref="rootEl" :class="$style.root" :style="{ zIndex }">
@@ -67,6 +67,11 @@ const currentIndex = ref(props.defaultIndex ?? 0);
 watch(currentIndex, (newIndex) => {
 	activatedIndexes.value.add(newIndex);
 }, { immediate: true });
+watch(currentIndex, (newIndex) => {
+	for (let i = 0; i < props.images.length; i++) {
+		props.images[i].sourceElement.style.visibility = i === newIndex ? 'hidden' : '';
+	}
+}, { immediate: false });
 
 const openAnimDuration = 200;
 const closeAnimDuration = 200;
@@ -128,6 +133,15 @@ function onPrev() {
 function onItemClose() {
 	showing.value = false;
 }
+
+function onAfterLeave() {
+	for (const image of props.images) {
+		if (image.sourceElement != null) {
+			image.sourceElement.style.visibility = '';
+		}
+	}
+	emit('closed');
+}
 </script>
 
 <style lang="scss" module>