summaryrefslogtreecommitdiff
path: root/packages/frontend/src/ui/_common_/common.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/frontend/src/ui/_common_/common.vue')
-rw-r--r--packages/frontend/src/ui/_common_/common.vue17
1 files changed, 9 insertions, 8 deletions
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 930f633c9f..9ee3e3af37 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -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';