misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 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
Download patch file Download diff file Expand all files Collapse all files

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"/>
<TransitionGroup
<component
:is="prefer.s.animation ? TransitionGroup : 'div'"
tag="div"
:class="[$style.notifications, {
[$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_horizontal]: prefer.s.notificationStackAxis === 'horizontal',
}]"
:moveClass="prefer.s.animation ? $style.transition_notification_move : ''"
:enterActiveClass="prefer.s.animation ? $style.transition_notification_enterActive : ''"
:leaveActiveClass="prefer.s.animation ? $style.transition_notification_leaveActive : ''"
:enterFromClass="prefer.s.animation ? $style.transition_notification_enterFrom : ''"
:leaveToClass="prefer.s.animation ? $style.transition_notification_leaveTo : ''"
:moveClass="$style.transition_notification_move"
:enterActiveClass="$style.transition_notification_enterActive"
:leaveActiveClass="$style.transition_notification_leaveActive"
:enterFromClass="$style.transition_notification_enterFrom"
:leaveToClass="$style.transition_notification_leaveTo"
>
<div v-for="notification in notifications" :key="notification.id" :class="$style.notification">
<XNotification :notification="notification"/>
</div>
</TransitionGroup>
</component>
<XStreamIndicator/>
@ -45,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue';
import { defineAsyncComponent, ref, TransitionGroup } from 'vue';
import * as Misskey from 'misskey-js';
import { swInject } from './sw-inject.js';
import XNotification from './notification.vue';