mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-07 20:44:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf(frontend): アニメーション無効時のパフォーマンスを向上

Browse source
This commit is contained in:
syuilo 2025-03-30 08:49:14 +09:00
parent 2618585a25
commit a420a95fae
3 changed files with 20 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/frontend/src/components/MkReactionsViewer.vue
View file

@ -4,22 +4,24 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<TransitionGroup <component
:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''" :is="prefer.s.animation ? TransitionGroup : 'div'"
:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''" :enterActiveClass="$style.transition_x_enterActive"
:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''" :leaveActiveClass="$style.transition_x_leaveActive"
:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''" :enterFromClass="$style.transition_x_enterFrom"
:moveClass="prefer.s.animation ? $style.transition_x_move : ''" :leaveToClass="$style.transition_x_leaveTo"
:moveClass="$style.transition_x_move"
tag="div" :class="$style.root" tag="div" :class="$style.root"
> >
<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" @reactionToggled="onMockToggleReaction"/> <XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" @reactionToggled="onMockToggleReaction"/>
<slot v-if="hasMoreReactions" name="more"/> <slot v-if="hasMoreReactions" name="more"/>
</TransitionGroup> </component>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { inject, watch, ref } from 'vue'; import { inject, watch, ref } from 'vue';
import { TransitionGroup } from 'vue';
import XReaction from '@/components/MkReactionsViewer.reaction.vue'; import XReaction from '@/components/MkReactionsViewer.reaction.vue';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
import { DI } from '@/di.js'; import { DI } from '@/di.js';

3
packages/frontend/src/components/MkTooltip.vue
View file

@ -9,7 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
:leaveActiveClass="prefer.s.animation ? $style.transition_tooltip_leaveActive : ''" :leaveActiveClass="prefer.s.animation ? $style.transition_tooltip_leaveActive : ''"
:enterFromClass="prefer.s.animation ? $style.transition_tooltip_enterFrom : ''" :enterFromClass="prefer.s.animation ? $style.transition_tooltip_enterFrom : ''"
:leaveToClass="prefer.s.animation ? $style.transition_tooltip_leaveTo : ''" :leaveToClass="prefer.s.animation ? $style.transition_tooltip_leaveTo : ''"
appear @afterLeave="emit('closed')" appear :css="prefer.s.animation"
@afterLeave="emit('closed')"
> >
<div v-show="showing" ref="el" :class="$style.root" class="_acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }"> <div v-show="showing" ref="el" :class="$style.root" class="_acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
<slot> <slot>

17
packages/frontend/src/ui/_common_/common.vue
View file

@ -14,7 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<XUpload v-if="uploads.length > 0"/> <XUpload v-if="uploads.length > 0"/>
<TransitionGroup <component
:is="prefer.s.animation ? TransitionGroup : 'div'"
tag="div" tag="div"
:class="[$style.notifications, { :class="[$style.notifications, {
[$style.notificationsPosition_leftTop]: prefer.s.notificationPosition === 'leftTop', [$style.notificationsPosition_leftTop]: prefer.s.notificationPosition === 'leftTop',
@ -24,16 +25,16 @@ SPDX-License-Identifier: AGPL-3.0-only
[$style.notificationsStackAxis_vertical]: prefer.s.notificationStackAxis === 'vertical', [$style.notificationsStackAxis_vertical]: prefer.s.notificationStackAxis === 'vertical',
[$style.notificationsStackAxis_horizontal]: prefer.s.notificationStackAxis === 'horizontal', [$style.notificationsStackAxis_horizontal]: prefer.s.notificationStackAxis === 'horizontal',
}]" }]"
:moveClass="prefer.s.animation ? $style.transition_notification_move : ''" :moveClass="$style.transition_notification_move"
:enterActiveClass="prefer.s.animation ? $style.transition_notification_enterActive : ''" :enterActiveClass="$style.transition_notification_enterActive"
:leaveActiveClass="prefer.s.animation ? $style.transition_notification_leaveActive : ''" :leaveActiveClass="$style.transition_notification_leaveActive"
:enterFromClass="prefer.s.animation ? $style.transition_notification_enterFrom : ''" :enterFromClass="$style.transition_notification_enterFrom"
:leaveToClass="prefer.s.animation ? $style.transition_notification_leaveTo : ''" :leaveToClass="$style.transition_notification_leaveTo"
> >
<div v-for="notification in notifications" :key="notification.id" :class="$style.notification"> <div v-for="notification in notifications" :key="notification.id" :class="$style.notification">
<XNotification :notification="notification"/> <XNotification :notification="notification"/>
</div> </div>
</TransitionGroup> </component>
<XStreamIndicator/> <XStreamIndicator/>
@ -45,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue'; import { defineAsyncComponent, ref, TransitionGroup } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { swInject } from './sw-inject.js'; import { swInject } from './sw-inject.js';
import XNotification from './notification.vue'; import XNotification from './notification.vue';