From 5cb6661484e98c5fcc1fdeae121caf9f0880650b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Wed, 22 Jul 2026 21:13:27 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20StreamingTimeline=E3=81=AE?=
 =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=82=B9=E3=82=BF=E3=83=B3=E3=82=B9=E3=81=8C?=
 =?UTF-8?q?=E4=BF=9D=E6=8C=81=E3=81=95=E3=82=8C=E3=81=9F=E7=8A=B6=E6=85=8B?=
 =?UTF-8?q?=E3=81=A7=E3=83=9A=E3=83=BC=E3=82=B8=E3=82=92=E8=A1=8C=E3=81=8D?=
 =?UTF-8?q?=E6=9D=A5=E3=81=99=E3=82=8B=E3=81=A8=E3=82=A2=E3=83=8B=E3=83=A1?=
 =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=8C=E5=86=8D=E5=BA=A6?=
 =?UTF-8?q?=E5=86=8D=E7=94=9F=E3=81=95=E3=82=8C=E3=82=8B=E5=95=8F=E9=A1=8C?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3=20(#17775)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): StreamingTimelineのインスタンスが保持された状態でページを行き来するとアニメーションが再度再生される問題を修正

* fix
---
 .../src/components/MkStreamingTimelineItem.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkStreamingTimelineItem.vue b/packages/frontend/src/components/MkStreamingTimelineItem.vue
index eb01a67881..5328e8eda8 100644
--- a/packages/frontend/src/components/MkStreamingTimelineItem.vue
+++ b/packages/frontend/src/components/MkStreamingTimelineItem.vue
@@ -7,12 +7,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div
 		ref="rootEl"
 		:class="[$style.root, {
-			[$style.enter]: animatingIn,
+			[$style.enter]: animatingIn && animating && !animatingOut,
 			[$style.leave]: animatingOut,
 			[$style.animating]: animating,
 		}]"
-		@animationstart="animating = true"
-		@animationend="animating = false"
+		@animationend.self="onAnimationEnd"
+		@animationcancel.self="onAnimationEnd"
 	>
 		<div ref="innerEl">
 			<slot></slot>
@@ -40,7 +40,7 @@ if (!supportsInterpolateSize) {
 </script>
 
 <script setup lang="ts">
-import { useTemplateRef, onMounted, onBeforeUnmount, ref } from 'vue';
+import { useTemplateRef, onMounted, onBeforeUnmount, ref, watch } from 'vue';
 
 const props = defineProps<{
 	animatingIn?: boolean;
@@ -52,6 +52,16 @@ const innerEl = useTemplateRef('innerEl');
 
 const animating = ref(false);
 
+watch([() => props.animatingIn, () => props.animatingOut], ([animatingIn, animatingOut]) => {
+	if (animatingIn === true || animatingOut === true) animating.value = true;
+}, { immediate: true });
+
+function onAnimationEnd() {
+	// 削除アニメーション中（enterから差し替わった場合を含む）は、要素が消えるまで再生中扱いのままにする
+	if (props.animatingOut === true) return;
+	animating.value = false;
+}
+
 onMounted(() => {
 	if (resizeObserver != null && rootEl.value != null && innerEl.value != null) {
 		resizeObserver.observe(innerEl.value);