natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Only animate in if newly added

This commit is contained in:
Freeplay 2023-02-25 15:36:35 -05:00
parent 5d391bd198
commit 1c57ba6242
1 changed files with 8 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/client/src/components/MkReactionsViewer.reaction.vue
View File

@ -4,7 +4,7 @@
ref="buttonRef" ref="buttonRef"
v-ripple="canToggle" v-ripple="canToggle"
class="hkzvhatu _button" class="hkzvhatu _button"
:class="{ reacted: note.myReaction == reaction, canToggle }" :class="{ reacted: note.myReaction == reaction, canToggle, newlyAdded: !isInitial }"
@click="toggleReaction()" @click="toggleReaction()"
> >
<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/> <XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
@ -13,7 +13,7 @@
</template> </template>
<script lang="ts" setup> <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 * as misskey from 'calckey-js';
import XDetails from '@/components/MkReactionsViewer.details.vue'; import XDetails from '@/components/MkReactionsViewer.details.vue';
import XReactionIcon from '@/components/MkReactionIcon.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) => { useTooltip(buttonRef, async (showing) => {
const reactions = await os.apiGet('notes/reactions', { const reactions = await os.apiGet('notes/reactions', {
noteId: props.note.id, noteId: props.note.id,
@ -98,9 +84,13 @@ useTooltip(buttonRef, async (showing) => {
padding: 0 6px; padding: 0 6px;
border-radius: 4px; border-radius: 4px;
pointer-events: all; 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) { :deep(.mk-emoji) {
animation: scaleIn .4s cubic-bezier(0,0,0,1.5);
transition: transform .4s cubic-bezier(0,0,0,6); transition: transform .4s cubic-bezier(0,0,0,6);
} }
&.reacted :deep(.mk-emoji) { &.reacted :deep(.mk-emoji) {