usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

use SkTransitionGroup for all dynamic TransitionGroup components

This commit is contained in:
Hazelnoot 2025-05-29 12:41:36 -04:00 committed by kakkokari-gtyih
parent 017e905072
commit 8028c4e8c2
3 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/frontend/src/components/MkDateSeparatedList.vue
View File

@ -13,6 +13,7 @@ import * as os from '@/os.js';
import { instance } from '@/instance.js'; import { instance } from '@/instance.js';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
import { getDateText } from '@/utility/timeline-date-separate.js'; import { getDateText } from '@/utility/timeline-date-separate.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -141,14 +142,12 @@ export default defineComponent({
[$style['direction-up']]: props.direction === 'up', [$style['direction-up']]: props.direction === 'up',
}; };
return () => prefer.s.animation ? h(TransitionGroup, { return () => h(SkTransitionGroup, {
class: classes, class: classes,
name: 'list', name: 'list',
tag: 'div', tag: 'div',
onBeforeLeave, onBeforeLeave,
onLeaveCancelled, onLeaveCancelled,
}, { default: renderChildren }) : h('div', {
class: classes,
}, { default: renderChildren }); }, { default: renderChildren });
}, },
}); });

6
packages/frontend/src/components/MkReactionsViewer.vue
View File

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<component <SkTransitionGroup
:is="prefer.s.animation ? TransitionGroup : 'div'"
:enterActiveClass="$style.transition_x_enterActive" :enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="$style.transition_x_leaveActive" :leaveActiveClass="$style.transition_x_leaveActive"
:enterFromClass="$style.transition_x_enterFrom" :enterFromClass="$style.transition_x_enterFrom"
@ -25,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@reactionToggled="onMockToggleReaction" @reactionToggled="onMockToggleReaction"
/> />
<slot v-if="hasMoreReactions" name="more"/> <slot v-if="hasMoreReactions" name="more"/>
</component> </SkTransitionGroup>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -35,6 +34,7 @@ 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';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
noteId: Misskey.entities.Note['id']; noteId: Misskey.entities.Note['id'];

8
packages/frontend/src/ui/_common_/common.vue
View File

@ -65,8 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-on="popup.events" v-on="popup.events"
/> />
<component <SkTransitionGroup
: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',
@ -85,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<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>
</component> </SkTransitionGroup>
<XStreamIndicator/> <XStreamIndicator/>
@ -97,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, ref, TransitionGroup } from 'vue'; import { defineAsyncComponent, ref } 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';
@ -111,6 +110,7 @@ import { prefer } from '@/preferences.js';
import { globalEvents } from '@/events.js'; import { globalEvents } from '@/events.js';
import { store } from '@/store.js'; import { store } from '@/store.js';
import XNavbar from '@/ui/_common_/navbar.vue'; import XNavbar from '@/ui/_common_/navbar.vue';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue')); const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
const XWidgets = defineAsyncComponent(() => import('./widgets.vue')); const XWidgets = defineAsyncComponent(() => import('./widgets.vue'));