From f5f5eab09e4796d9a34e909d061e0da8a46d0f97 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 10 Jul 2026 09:34:08 +0900
Subject: [PATCH] fix

---
 .../src/components/MkImageGallery.vue         | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkImageGallery.vue b/packages/frontend/src/components/MkImageGallery.vue
index 0ded924c37..a79d7b47a7 100644
--- a/packages/frontend/src/components/MkImageGallery.vue
+++ b/packages/frontend/src/components/MkImageGallery.vue
@@ -4,11 +4,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
+<!-- durationは子Itemコンポーネントがフェードイン/アウトするdurationと合わせる -->
 <Transition
 	:enterActiveClass="prefer.s.animation ? $style.transition_root_enterActive : ''"
 	:leaveActiveClass="prefer.s.animation ? $style.transition_root_leaveActive : ''"
 	:enterFromClass="prefer.s.animation ? $style.transition_root_enterFrom : ''"
 	:leaveToClass="prefer.s.animation ? $style.transition_root_leaveTo : ''"
+	:duration="300"
+	appear
 	@afterLeave="emit('closed')"
 >
 	<!-- v-ifを使うとfalseになったとき(transitionが行われている間)子コンポーネントの更新が停止するのか子コンポーネントがアニメーションされなくなる -->
@@ -111,11 +114,19 @@ function onItemClose() {
 </script>
 
 <style lang="scss" module>
-.transition_root_enterActive,
-.transition_root_leaveActive {
-	transition: opacity 300ms; // 子Itemコンポーネントがフェードアウトするdurationと合わせる
+.transition_root_enterActive {
+	> .bg {
+		transition: opacity 300ms; // 子Itemコンポーネントがフェードイン/アウトするdurationと合わせる
+	}
+}
+.transition_root_leaveActive {
+	transition: opacity 300ms; // 子Itemコンポーネントがフェードイン/アウトするdurationと合わせる
+}
+.transition_root_enterFrom  {
+	> .bg {
+		opacity: 0;
+	}
 }
-.transition_root_enterFrom,
 .transition_root_leaveTo {
 	opacity: 0;
 }