From 1c57ba62424a865b7c6f5d9120136815f96696f7 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 25 Feb 2023 15:36:35 -0500
Subject: [PATCH] Only animate in if newly added

---
 .../components/MkReactionsViewer.reaction.vue | 26 ++++++-------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index f21fe175a1..00f49e1126 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -4,7 +4,7 @@
 	ref="buttonRef"
 	v-ripple="canToggle"
 	class="hkzvhatu _button"
-	:class="{ reacted: note.myReaction == reaction, canToggle }"
+	:class="{ reacted: note.myReaction == reaction, canToggle, newlyAdded: !isInitial }"
 	@click="toggleReaction()"
 >
 	<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, onUpdated, ref, watch } from 'vue';
 import * as misskey from 'calckey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import XReactionIcon from '@/components/MkReactionIcon.vue';
@@ -55,20 +55,6 @@ const toggleReaction = () => {
 	}
 };
 
-const anime = () => {
-	if (document.hidden) return;
-
-	// TODO: 新しくリアクションが付いたことが視覚的に分かりやすいアニメーション
-};
-
-watch(() => props.count, (newCount, oldCount) => {
-	if (oldCount < newCount) anime();
-});
-
-onMounted(() => {
-	if (!props.isInitial) anime();
-});
-
 useTooltip(buttonRef, async (showing) => {
 	const reactions = await os.apiGet('notes/reactions', {
 		noteId: props.note.id,
@@ -98,9 +84,13 @@ useTooltip(buttonRef, async (showing) => {
 	padding: 0 6px;
 	border-radius: 4px;
 	pointer-events: all;
-	animation: scaleInSmall .3s cubic-bezier(0,0,0,1.2);
+	&.newlyAdded {
+		animation: scaleInSmall .3s cubic-bezier(0,0,0,1.2);
+		:deep(.mk-emoji) {
+			animation: scaleIn .4s cubic-bezier(0,0,0,1.5);
+		}
+	}
 	:deep(.mk-emoji) {
-		animation: scaleIn .4s cubic-bezier(0,0,0,1.5);
 		transition: transform .4s cubic-bezier(0,0,0,6);
 	}
 	&.reacted :deep(.mk-emoji) {