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

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

* fix

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);